/* ============================================================
   Feature · clientContacts
   ------------------------------------------------------------
   Every rule is scoped under `.feature-client-contacts` so it
   never collides with styles.css / modernize.css / other
   features. Token-driven; no hard-coded color, spacing, or
   radius. Loaded after ui-primitives.css per
   migration/css-token-migration.md "Load order is the contract".
   Created by: Phase 12 — first nested-array editor.
   ============================================================ */

.feature-client-contacts {
  padding: var(--space-6) 0 var(--space-10);
}

.feature-client-contacts .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 720px;
  margin: 0 auto;
  padding-inline: var(--space-4);
}

.feature-client-contacts__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.feature-client-contacts__state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.feature-client-contacts__editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.feature-client-contacts__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) 0;
  background: var(--color-bg-surface);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.feature-client-contacts__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-client-contacts__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.feature-client-contacts__row-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-client-contacts__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feature-client-contacts__row-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.feature-client-contacts__row-message {
  display: inline-flex;
}

.feature-client-contacts__row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-3);
}

.feature-client-contacts__save-button,
.feature-client-contacts__cancel-button,
.feature-client-contacts__delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.feature-client-contacts__save-button {
  background: var(--color-accent);
  color: var(--color-text-on-brand);
  border: 1px solid var(--color-accent);
}

.feature-client-contacts__save-button:hover:not(:disabled),
.feature-client-contacts__save-button:focus-visible:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  outline: none;
}

.feature-client-contacts__cancel-button {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}

.feature-client-contacts__cancel-button:hover:not(:disabled),
.feature-client-contacts__cancel-button:focus-visible:not(:disabled) {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
  outline: none;
}

.feature-client-contacts__delete-button {
  background: transparent;
  color: var(--color-danger);
  border: 1px solid var(--color-border-default);
}

.feature-client-contacts__delete-button:hover:not(:disabled),
.feature-client-contacts__delete-button:focus-visible:not(:disabled) {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border-color: var(--color-danger);
  outline: none;
}

.feature-client-contacts__save-button:disabled,
.feature-client-contacts__cancel-button:disabled,
.feature-client-contacts__delete-button:disabled,
.feature-client-contacts__save-button[data-loading="true"],
.feature-client-contacts__delete-button[data-loading="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.feature-client-contacts__save-button .ui-spinner {
  color: var(--color-text-on-brand);
  width: 16px;
  height: 16px;
}

.feature-client-contacts__delete-button .ui-spinner {
  color: var(--color-danger);
  width: 16px;
  height: 16px;
}

/* Native <select> styling was extracted to .ui-select in
   ui-primitives.css by Phase 13 (proto-consumer → formal consumer
   migration). See migration/phase13-primitive-stabilization-plan.md
   §2.1 / §9.1. */

/* ---------- Collection actions ---------- */

.feature-client-contacts__collection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
}

.feature-client-contacts__add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-accent);
  background: transparent;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.feature-client-contacts__add-button:hover,
.feature-client-contacts__add-button:focus-visible {
  background: var(--color-accent-soft);
  border-style: solid;
  outline: none;
}

.feature-client-contacts__hint {
  margin-left: auto;
}

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

@media (min-width: 768px) {
  .feature-client-contacts {
    padding: var(--space-8) 0 var(--space-12);
  }

  .feature-client-contacts__row {
    padding: var(--space-5);
  }

  .feature-client-contacts__row-fields {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .feature-client-contacts__field--type {
    flex: 0 0 160px;
  }

  .feature-client-contacts__field--value {
    flex: 1 1 auto;
  }

  .feature-client-contacts__field--primary {
    flex: 0 0 auto;
    padding-top: 28px; /* align the checkbox label with the inputs */
  }
}

.feature-client-contacts__delete-confirm {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-danger-soft, var(--color-bg-subtle));
}

.feature-client-contacts__delete-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.feature-client-contacts__delete-desc {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.feature-client-contacts__delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}