/* CRM company views */

.crm-company-empty,
.crm-company-table,
.crm-company-edit,
.crm-company-search-panel,
.crm-company-results,
.crm-contact-empty,
.crm-contact-table,
.crm-contact-form-page {
  margin-block-start: 1.5rem;
}

.crm-company-empty__actions,
.crm-contact-empty__actions {
  margin-block-start: 1rem;
}

.crm-company-empty__action-group,
.crm-contact-empty__action-group {
  display: flex;
  margin: -0.375rem -0.5rem;
}

.crm-company-empty__link,
.crm-contact-empty__link {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  padding: 0.375rem 0.5rem;
  color: rgb(var(--palette-blue-800));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition:
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.crm-company-empty__link:hover,
.crm-company-empty__link:focus,
.crm-contact-empty__link:hover,
.crm-contact-empty__link:focus {
  background-color: rgb(var(--palette-blue-100));
  outline: none;
}

.crm-company-search-panel {
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.crm-company-search-panel__inner,
.crm-contact-search__inner {
  margin-block-start: 0.5rem;
  margin-inline-start: 1rem;
}

.crm-company-search-panel__controller,
.crm-contact-search__controller {
  display: flex;
  flex: 1 1 auto;
}

.crm-company-search-panel__form,
.crm-company-search-panel__query,
.crm-contact-search__form,
.crm-contact-search__query {
  inline-size: 100%;
}

.crm-company-search-panel__query,
.crm-contact-search__query {
  display: flex;
}

.crm-company-search-panel__query-wrap,
.crm-contact-search__query-wrap {
  position: relative;
  inline-size: 100%;
  color: var(--color-ink-lighter);
}

.crm-company-search-panel__query-wrap:focus-within,
.crm-contact-search__query-wrap:focus-within {
  color: var(--color-ink-light);
}

.crm-company-search-panel__query-prefix button,
.crm-contact-search__query-prefix button {
  pointer-events: auto;
}

.crm-company-search-panel__query-icon,
.crm-contact-search__query-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.crm-company-search-empty,
.crm-contact-search-empty {
  padding: 1rem;
}

.crm-company-modal-form,
.crm-contact-form {
  padding-inline: 2.5rem;
}

.crm-company-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}

.crm-company-filter__field {
  inline-size: 100%;
}

.crm-company-filter__submit {
  inline-size: 100%;
}


.crm-company-edit__layout,
.crm-contact-form-page__layout {
  display: grid;
  gap: 1.5rem;
}

.crm-contact-form__label {
  display: block;
  margin-block: 1rem 0.25rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .crm-company-edit__layout,
  .crm-contact-form-page__layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crm-company-edit__form,
  .crm-contact-form-page__form {
    grid-column: span 2 / span 2;
  }
}

@media (min-width: 768px) {
  .crm-company-filter {
    flex-direction: row;
  }

  .crm-company-filter__field {
    flex: 1 1 0;
  }

  .crm-company-filter__submit {
    inline-size: auto;
  }
}

.contact-detail-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 2rem;
}

.contact-detail-list {
  margin-block-start: 1rem;
  color: var(--color-ink-lighter);
  line-height: 1.25rem;
}

/* Main contacts */

.contacts-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-block-start: 1.5rem;
}

.contacts-page__header,
.contact-profile {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.contacts-page__heading {
  min-inline-size: 0;
}

.contacts-page__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.contacts-page__title,
.contact-profile__name,
.contact-form-page__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.contacts-page__intro,
.contact-profile__help,
.contact-form-page__intro,
.contacts-search__help,
.contacts-directory__description,
.contact-section-heading__help,
.contact-form__section-help {
  max-inline-size: 68ch;
  margin: 0.5rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.contacts-page__summary,
.contacts-directory__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.2;
}

.contacts-page__summary {
  justify-self: start;
  padding: 0.75rem 1rem;
}

.contacts-page__summary-value {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
}

.contacts-page__summary-label {
  font-weight: 500;
}

.contacts-search {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.contacts-search__title,
.contacts-directory__title,
.contact-section-heading__title,
.contact-form__section-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.contacts-search .crm-contact-search__inner {
  margin: 0;
}

.contacts-search .crm-contact-search__query-prefix {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0.5rem;
  display: flex;
  align-items: center;
}

.contacts-search .crm-contact-search__query-prefix button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.contacts-search .crm-contact-search__query-prefix button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.contacts-search .crm-contact-search__input {
  padding-inline-start: 3rem;
}

.contacts-directory {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.contacts-directory__header {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.contacts-directory__count {
  justify-self: start;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
}

.contacts-directory__table {
  overflow-x: auto;
}

.contacts-directory .simple-table {
  inline-size: 100%;
  min-inline-size: 46rem;
  margin-block-start: 0;
}

.contact-row__primary {
  min-inline-size: 14rem;
}

.contact-row__name {
  display: inline-flex;
  max-inline-size: 34ch;
  color: var(--color-link);
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
  white-space: normal;
}

.contact-row__name:hover {
  color: var(--color-brand-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact-row__subtitle {
  display: block;
  margin-block-start: 0.35rem;
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 500;
  line-height: 1.25;
  white-space: normal;
}

.contact-row__email {
  color: var(--color-link);
  text-decoration: none;
}

.contact-row__email:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact-row__assignment-count {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  padding-block: 0.25rem;
  padding-inline: 0.625rem;
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.contact-row__muted,
.contact-facts__muted {
  color: var(--color-ink-lighter);
  font-weight: 500;
}

.contacts-empty {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.contacts-empty__icon,
.contact-section-heading__icon,
.contact-form__section-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-pill);
  background-color: rgb(var(--palette-blue-100));
  color: rgb(var(--palette-blue-800));
}

.contacts-empty__icon .icon,
.contact-section-heading__icon .icon,
.contact-form__section-icon .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.contacts-empty__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.contacts-empty__body {
  max-inline-size: 64ch;
  margin: 0.4rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.contacts-empty__actions {
  margin-block-start: 1rem;
}

.contact-profile__identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-inline-size: 0;
}

.contact-profile__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border: 1px solid rgb(var(--palette-green-200));
  border-radius: var(--radius-pill);
  background-color: rgb(var(--palette-green-100));
  color: rgb(var(--palette-green-800));
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1;
}

.contact-profile__summary {
  margin: 0.4rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.35;
}

.contact-show-grid {
  display: grid;
  gap: 1.25rem;
}

.contact-facts,
.contact-assignments {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.contact-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.contact-facts__list {
  display: grid;
  gap: 0;
  margin: 1.25rem 0 0;
}

.contact-facts__item {
  display: grid;
  gap: 0.35rem;
  padding-block: 0.875rem;
  border-block-start: 1px solid var(--color-border);
}

.contact-facts__item:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.contact-facts__item dt {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0;
}

.contact-facts__item dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.contact-facts__item a {
  color: var(--color-link);
  text-decoration: none;
}

.contact-facts__item a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.contact-assignments__header {
  padding: 1rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.contact-assignments__table {
  overflow-x: auto;
}

.contact-assignments .assignment-table {
  margin: 0;
}

.contact-form-page {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.contact-form-page__layout {
  align-items: start;
}

.contact-form-page__aside {
  min-inline-size: 0;
}

.contact-form-page__support {
  display: grid;
  gap: 1rem;
  margin-block-start: 1.25rem;
}

.contact-form.form-frame {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.contact-form__section {
  min-inline-size: 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--color-border-medium);
}

.contact-form__section:first-of-type {
  padding-block-start: 0;
  border-block-start: 0;
}

.contact-form__section + .contact-form__section,
.contact-form__section + .form-actions {
  margin-block-start: 1.5rem;
}

.contact-form__section-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-block-end: 1rem;
}

.contact-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 1rem;
}

.contact-form .form-field:has(> .form-field__label) {
  padding-block-start: 1rem;
}

@media (min-width: 640px) {
  .contacts-page__header,
  .contacts-search,
  .contact-profile {
    padding: 1.25rem;
  }

  .contacts-directory__header,
  .contact-assignments__header {
    padding: 1.25rem 1.5rem;
  }
}

@media (min-width: 768px) {
  .contacts-page__header,
  .contacts-directory__header,
  .contacts-search {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
    align-items: start;
  }

  .contacts-page__summary,
  .contacts-directory__count {
    justify-self: end;
  }

  .contact-show-grid {
    grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 2fr);
    align-items: start;
  }

  .contact-form-page__layout {
    grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 2fr);
  }

  .contact-form-page__aside {
    grid-column: 1;
  }

  .contact-form-page__form {
    grid-column: 2;
  }

  .contact-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-form__field--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .contacts-page__title,
  .contact-profile__name,
  .contact-form-page__title {
    font-size: 1.25rem;
  }

  .contacts-directory__table {
    overflow: visible;
  }

  .contacts-directory .simple-table {
    min-inline-size: 0;
  }

  .contacts-directory .simple-table thead {
    display: none;
  }

  .contacts-directory .simple-table tbody,
  .contacts-directory .simple-table tr,
  .contacts-directory .simple-table td {
    display: block;
    inline-size: 100%;
  }

  .contacts-directory .simple-table tbody {
    padding: 1rem;
  }

  .contact-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .contact-row + .contact-row,
  .contact-row + .crm-contact-search-empty {
    margin-block-start: 0.75rem;
  }

  .contacts-directory .table-stripped > tbody > .contact-row > .td {
    background-color: transparent;
  }

  .contact-row .td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-block-start: 1px solid var(--color-border);
    white-space: normal;
  }

  .contact-row .td:first-child {
    border-block-start: 0;
  }

  .contact-row .td::before {
    flex: 0 0 7rem;
    color: var(--color-ink-lighter);
    font-size: var(--text-x-small);
    font-weight: 700;
    line-height: 1.25;
    text-align: start;
    content: attr(data-label);
  }

  .contact-row__primary {
    flex-direction: column;
    gap: 0.35rem;
  }

  .contact-row__primary::before {
    display: none;
  }

  .contact-row__actions {
    justify-content: flex-end;
  }

  .crm-contact-search-empty {
    display: block;
    padding: 0;
  }
}

/* Main providers */

.providers-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-block-start: 1.5rem;
}

.providers-top-menu-action {
  justify-content: center;
  inline-size: 2.5rem;
  min-inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-pill);
}

.providers-top-menu-action__icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: 0 0 auto;
}

.providers-page__overview,
.providers-search,
.provider-profile {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.providers-page__filters,
.providers-page__results-section {
  display: grid;
  gap: 0.875rem;
  min-inline-size: 0;
}

.providers-page__results-header {
  display: grid;
  gap: 0.75rem;
  align-items: start;
  min-inline-size: 0;
}

.providers-page__meta {
  min-inline-size: 0;
}

.providers-page__heading {
  min-inline-size: 0;
}

.providers-page__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.providers-page__title,
.provider-profile__name,
.provider-form-page__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.providers-page__intro,
.providers-page-section-heading__body,
.providers-search__help,
.provider-directory__description,
.provider-profile__help,
.provider-form-page__intro,
.provider-section-heading__help,
.provider-form__section-help {
  max-inline-size: 68ch;
  margin: 0.5rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.providers-page-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  min-inline-size: 0;
}

.providers-page-summary__item,
.provider-directory__count {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.2;
}

.providers-page-summary__item {
  min-inline-size: 0;
  padding: 0.9rem 1rem;
}

.providers-page-summary__item--primary {
  border-color: color-mix(in oklch, var(--color-brand) 24%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-surface) 88%, var(--color-brand) 12%);
}

.providers-page-summary__label {
  margin: 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
  line-height: 1.2;
}

.providers-page-summary__value {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1;
}

.providers-search {
  gap: 1rem;
}

.providers-search form {
  grid-column: 1 / -1;
}

.providers-search__title,
.provider-directory__title,
.providers-page-section-heading__title,
.provider-section-heading__title,
.provider-form__section-title,
.providers-empty__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.providers-page-section-heading__body {
  margin-block-start: 0.35rem;
}

.provider-directory__panel {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.provider-directory__header {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.provider-directory__count {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-self: start;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
}

.provider-directory__table {
  overflow-x: auto;
}

.provider-directory .simple-table {
  inline-size: 100%;
  min-inline-size: 48rem;
  margin-block-start: 0;
}

.provider-directory-table__caption {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
}

.provider-directory-table__heading {
  border-block-end-color: var(--color-border-medium);
  background-color: color-mix(in oklch, var(--color-surface-muted) 88%, var(--color-surface));
  color: var(--color-ink-light);
  letter-spacing: 0;
  text-transform: none;
}

.provider-directory-table__heading--name {
  inline-size: 26%;
}

.provider-directory-table__heading--legal {
  inline-size: 24%;
}

.provider-directory-table__heading--email {
  inline-size: 24%;
}

.provider-directory-table__heading--category {
  inline-size: 18%;
}

.provider-directory-table__heading--actions {
  inline-size: 3.75rem;
}

.provider-directory-table__cell {
  border-block-end: 1px solid var(--color-border);
  vertical-align: middle;
}

.provider-directory-row:last-child .provider-directory-table__cell {
  border-block-end: 0;
}

.provider-directory-row:hover .provider-directory-table__cell {
  background-color: color-mix(in oklch, var(--color-surface-muted) 76%, var(--color-surface));
}

.provider-directory-row__name,
.provider-directory-row__email {
  color: var(--color-brand-strong);
  text-decoration: none;
}

.provider-directory-row__identity {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.provider-directory-row__name {
  display: inline-flex;
  max-inline-size: 100%;
  align-items: center;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.provider-directory-row__name:hover,
.provider-directory-row__name:focus-visible,
.provider-directory-row__email:hover,
.provider-directory-row__email:focus-visible,
.provider-facts__item a:hover,
.provider-facts__item a:focus-visible {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.provider-directory-row__name:focus-visible,
.provider-directory-row__email:focus-visible,
.provider-facts__item a:focus-visible {
  border-radius: var(--radius-xs);
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.provider-directory-row__secondary,
.provider-directory-row__email,
.provider-directory-row__empty,
.provider-directory-row__identifier {
  display: inline-block;
  max-inline-size: 100%;
  overflow: hidden;
  color: var(--color-ink-light);
  font-weight: 400;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.provider-directory-row__identifier {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 600;
}

.provider-directory-row__empty,
.provider-facts__muted {
  color: var(--color-ink-lighter);
  font-weight: 500;
}

.provider-directory-row__category {
  display: inline-flex;
  max-inline-size: 100%;
  align-items: center;
  border: 1px solid color-mix(in oklch, var(--color-success) 22%, var(--color-border));
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklch, var(--color-surface) 88%, var(--color-success) 12%);
  padding-block: 0.2rem;
  padding-inline: 0.625rem;
  color: color-mix(in oklch, var(--color-success-strong) 76%, var(--color-ink));
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.provider-directory-table__footer {
  padding: 1rem 1.25rem;
  border-block-start: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.providers-empty {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.providers-empty__icon,
.provider-section-heading__icon,
.provider-form__section-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklch, var(--color-success) 14%, var(--color-surface));
  color: color-mix(in oklch, var(--color-success-strong) 72%, var(--color-ink));
}

.providers-empty__icon .icon,
.provider-section-heading__icon .icon,
.provider-form__section-icon .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.providers-empty__body {
  max-inline-size: 64ch;
  margin: 0.4rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.providers-empty__actions {
  margin-block-start: 1rem;
}

.provider-profile__identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-inline-size: 0;
}

.provider-profile__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  border: 1px solid color-mix(in oklch, var(--color-success) 24%, var(--color-border));
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklch, var(--color-success) 14%, var(--color-surface));
  color: color-mix(in oklch, var(--color-success-strong) 78%, var(--color-ink));
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1;
}

.provider-profile__summary {
  margin: 0.4rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.35;
}

.provider-show-grid {
  display: grid;
  gap: 1.25rem;
  margin-block-start: 1.25rem;
}

.provider-facts,
.provider-guidance,
.provider-form-page {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.provider-facts {
  padding: 1rem;
  background-color: var(--color-surface);
}

.provider-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.provider-facts__list {
  display: grid;
  gap: 0;
  margin: 1.25rem 0 0;
}

.provider-facts__item {
  display: grid;
  gap: 0.35rem;
  padding-block: 0.875rem;
  border-block-start: 1px solid var(--color-border);
}

.provider-facts__item:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.provider-facts__item dt {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0;
}

.provider-facts__item dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.provider-facts__item a {
  color: var(--color-link);
  text-decoration: none;
}

.provider-guidance {
  display: grid;
  gap: 1.25rem;
}

.provider-guidance__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.provider-form-page__layout {
  display: grid;
  align-items: start;
  gap: 1.5rem;
}

.provider-form-page__aside,
.provider-form-page__form {
  min-inline-size: 0;
}

.provider-form-page__support {
  display: grid;
  gap: 1rem;
  margin-block-start: 1.25rem;
}

.provider-form-page__support .contact-detail-section {
  margin-block-start: 0;
}

.provider-form-page__support .contact-detail-list {
  margin-block-start: 0;
}

.provider-form.form-frame {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.provider-form__section {
  min-inline-size: 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--color-border-medium);
}

.provider-form__section:first-of-type {
  padding-block-start: 0;
  border-block-start: 0;
}

.provider-form__section + .provider-form__section,
.provider-form__section + .form-actions {
  margin-block-start: 1.5rem;
}

.provider-form__section-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-block-end: 1rem;
}

.provider-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 1rem;
}

.provider-form .form-field:has(> .form-field__label) {
  padding-block-start: 1rem;
}

@media (min-width: 640px) {
  .providers-page__overview,
  .providers-search,
  .provider-profile,
  .provider-facts {
    padding: 1.25rem;
  }

  .provider-directory__header {
    padding: 1.25rem 1.5rem;
  }
}

@media (min-width: 768px) {
  .providers-page__overview {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
    align-items: start;
  }

  .providers-page-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .providers-page__results-header,
  .provider-directory__header,
  .providers-search {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
    align-items: start;
  }

  .providers-page__meta,
  .provider-directory__count {
    justify-self: end;
  }

  .provider-show-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .provider-guidance {
    grid-column: 1 / -1;
  }

  .provider-form-page__layout {
    grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 2fr);
  }

  .provider-form-page__aside {
    grid-column: 1;
  }

  .provider-form-page__form {
    grid-column: 2;
  }

  .provider-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .provider-form__field--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .providers-page__title,
  .provider-profile__name,
  .provider-form-page__title {
    font-size: 1.25rem;
  }

  .provider-directory__table {
    overflow: visible;
  }

  .provider-directory .simple-table {
    min-inline-size: 0;
  }

  .provider-directory .simple-table thead {
    display: none;
  }

  .provider-directory .simple-table tbody,
  .provider-directory .simple-table tr,
  .provider-directory .simple-table td {
    display: block;
    inline-size: 100%;
  }

  .provider-directory .simple-table tbody {
    padding: 1rem;
  }

  .provider-directory-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .provider-directory-row + .provider-directory-row {
    margin-block-start: 0.75rem;
  }

  .provider-directory .table-stripped > tbody > .provider-directory-row > .td {
    background-color: transparent;
  }

  .provider-directory-row .td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-block-start: 1px solid var(--color-border);
    white-space: normal;
  }

  .provider-directory-row .td:first-child {
    border-block-start: 0;
  }

  .provider-directory-row .td::before {
    flex: 0 0 7rem;
    color: var(--color-ink-lighter);
    font-size: var(--text-x-small);
    font-weight: 700;
    line-height: 1.25;
    text-align: start;
    content: attr(data-label);
  }

  .provider-directory-table__cell--name {
    flex-direction: column;
    gap: 0.35rem;
  }

  .provider-directory-table__cell--name .provider-directory-row__identity {
    inline-size: 100%;
  }

  .provider-directory-table__cell--name .provider-directory-row__identifier {
    text-align: start;
  }

  .provider-directory-table__cell--name::before,
  .provider-directory-table__cell--actions::before {
    display: none;
  }

  .provider-directory-table__cell--actions {
    justify-content: flex-end;
  }

  .provider-directory-row__secondary,
  .provider-directory-row__email,
  .provider-directory-row__empty,
  .provider-directory-row__identifier {
    overflow: visible;
    text-align: end;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

/* CRM dashboard */

.crm-page-header,
.crm-dashboard-section,
.opportunity-board-overview,
.opportunity-list-filter,
.opportunity-list-panel {
  margin-block-start: 1.5rem;
}

.opportunity-board-overview {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--color-brand) 8%, transparent), transparent 42%),
    var(--color-surface);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 960px) {
  .opportunity-board-overview {
    grid-template-columns: minmax(0, 1fr) minmax(27rem, 0.92fr);
    align-items: end;
    padding: 1.5rem;
  }
}

.opportunity-board-overview__intro {
  display: grid;
  gap: 0.375rem;
}

.opportunity-board-overview__eyebrow,
.opportunity-kanban-shell__eyebrow {
  margin: 0;
  color: var(--color-brand-strong);
  font-size: var(--text-x-small);
  font-weight: 700;
  text-transform: uppercase;
}

.opportunity-board-overview__title,
.opportunity-kanban-shell__title {
  margin: 0;
  color: var(--color-ink);
  letter-spacing: 0;
}

.opportunity-board-overview__title {
  font-size: var(--text-x-large);
  font-weight: 750;
  line-height: 1.15;
}

.opportunity-board-overview__body {
  max-inline-size: 64ch;
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.5;
}

.opportunity-board-overview__metrics {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1320px) {
  .opportunity-board-overview__metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.opportunity-board-metric {
  display: grid;
  gap: 0.25rem;
  min-block-size: 4.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface) 92%, var(--color-surface-muted));
}

.opportunity-board-metric--value {
  background: color-mix(in oklch, var(--color-brand) 7%, var(--color-surface));
  border-color: color-mix(in oklch, var(--color-brand) 22%, var(--color-border));
}

.opportunity-board-metric__label {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
}

.opportunity-board-metric__value {
  min-inline-size: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 750;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.opportunity-list-filter--board,
.opportunity-list-panel--board {
  margin-block-start: 1rem;
}

.crm-page-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
}

/* CRM leads */

.lead-page,
.lead-list-page,
.lead-detail,
.lead-duplicates,
.lead-timeline,
.lead-actions,
.lead-conversion {
  margin-block-start: 1.5rem;
}

.lead-page {
  display: grid;
  gap: 1rem;
}

.lead-page__header,
.lead-list-page__header {
  display: grid;
  gap: 0.875rem;
  align-items: center;
}

@media (min-width: 768px) {
  .lead-page__header,
  .lead-list-page__header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.lead-page__header {
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.lead-list-page__header {
  padding-block: 1rem;
}

.lead-list-page__intro {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.lead-list-page__header .panel__description {
  max-inline-size: 58ch;
  margin: 0;
}

.lead-page__eyebrow {
  margin: 0 0 0.25rem;
  color: var(--color-brand-strong);
  font-size: var(--text-x-small);
  font-weight: 700;
  text-transform: uppercase;
}

.lead-page__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 750;
  line-height: 1.15;
}

.lead-page__description {
  max-inline-size: 68ch;
  margin: 0.375rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.5;
}

.lead-list-page__guidance {
  display: grid;
  gap: 0.125rem;
  max-inline-size: 24rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-muted) 70%, var(--color-surface));
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  line-height: 1.35;
}

.lead-list-page__guidance strong {
  color: var(--color-ink);
  font-size: var(--text-x-small);
  font-weight: 700;
}

.lead-filter-bar {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.lead-filter-bar__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}

.lead-filter-bar__title {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
}

.lead-filter-bar__count {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 600;
}

.lead-filter-bar__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  align-items: end;
}

.lead-filter-bar__field {
  min-inline-size: 0;
}

.lead-filter-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: end;
}

.lead-filter-bar .form-field {
  display: grid;
  gap: 0.25rem;
}

.lead-filter-bar .form-field__label {
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 650;
}

.lead-filter-bar .input {
  min-block-size: 2.375rem;
  border-color: var(--color-border-medium);
  background: var(--color-surface);
}

.lead-filter-bar .btn {
  min-block-size: 2.375rem;
}

@media (min-width: 700px) {
  .lead-filter-bar {
    padding-inline: 1.5rem;
  }

  .lead-filter-bar__fields {
    grid-template-columns: minmax(14rem, 1.4fr) repeat(2, minmax(9rem, 1fr));
  }

  .lead-filter-bar__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (min-width: 1100px) {
  .lead-filter-bar {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
  }

  .lead-filter-bar__summary {
    display: grid;
    justify-content: start;
    min-inline-size: 11rem;
  }

  .lead-filter-bar__fields {
    grid-template-columns: minmax(14rem, 1.5fr) repeat(3, minmax(8rem, 1fr)) auto;
  }

  .lead-filter-bar__actions {
    grid-column: auto;
  }
}

.lead-form {
  display: grid;
  gap: 1.25rem;
}

.lead-form__section {
  display: grid;
  gap: 0.875rem;
}

.lead-form__section + .lead-form__section,
.lead-conversion__form .lead-form__section-header + .form-field {
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--color-border);
}

.lead-form__section-header {
  display: grid;
  gap: 0.25rem;
  max-inline-size: 72ch;
}

.lead-form__section-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 650;
  line-height: 1.25;
}

.lead-form__section-copy {
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.lead-record {
  display: grid;
  gap: 0.125rem;
  min-inline-size: 0;
}

.lead-record__name {
  min-inline-size: 0;
}

.lead-record__meta {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  overflow-wrap: anywhere;
}

.lead-status {
  --lead-status-background: var(--color-surface-muted);
  --lead-status-color: var(--color-ink-light);

  background: var(--lead-status-background);
  color: var(--lead-status-color);
}

.lead-status--new {
  --lead-status-background: rgb(var(--palette-blue-50));
  --lead-status-color: rgb(var(--palette-blue-700));
}

.lead-status--contacted {
  --lead-status-background: rgb(var(--palette-violet-50));
  --lead-status-color: rgb(var(--palette-violet-700));
}

.lead-status--qualified {
  --lead-status-background: rgb(var(--palette-green-50));
  --lead-status-color: rgb(var(--palette-green-700));
}

.lead-status--converted {
  --lead-status-background: rgb(var(--palette-teal-100));
  --lead-status-color: rgb(var(--palette-teal-700));
}

.lead-status--disqualified {
  --lead-status-background: rgb(var(--palette-red-50));
  --lead-status-color: rgb(var(--palette-red-700));
}

.lead-definition-grid {
  margin-block-start: 1rem;
}

.lead-actions__grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .lead-actions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.lead-action-card {
  --lead-action-accent: var(--color-border-strong);

  gap: 1rem;
  border-color: color-mix(in oklch, var(--lead-action-accent) 45%, var(--color-border));
  background: color-mix(in oklch, var(--lead-action-accent) 5%, var(--color-surface));
}

.lead-action-card--positive {
  --lead-action-accent: var(--color-success-strong);
}

.lead-action-card--caution {
  --lead-action-accent: var(--color-warning);
}

.lead-action-card__header {
  display: grid;
  gap: 0.25rem;
}

.lead-action-card__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 650;
}

.lead-action-card__copy {
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.lead-empty-state {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  margin-block-start: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.lead-empty-state__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 650;
}

.lead-empty-state__copy {
  max-inline-size: 60ch;
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

/* CRM admin setup */

.crm-automation-page {
  display: grid;
  gap: 1.25rem;
}

.crm-automation-overview {
  display: grid;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 960px) {
  .crm-automation-overview {
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  }
}

.crm-admin-summary {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .crm-admin-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.crm-admin-summary__item {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.crm-admin-summary__label {
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 650;
  text-transform: uppercase;
}

.crm-admin-summary__value {
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 750;
  line-height: 1;
}

.crm-automation-flow {
  display: grid;
  gap: 0.875rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.crm-automation-flow__header {
  display: grid;
  gap: 0.25rem;
}

.crm-automation-flow__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
}

.crm-automation-flow__copy {
  max-inline-size: 68ch;
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.crm-automation-flow__steps {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  counter-reset: crm-automation-flow;
  list-style: none;
}

@media (min-width: 820px) {
  .crm-automation-flow__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.crm-automation-flow__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.625rem;
  align-items: start;
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  line-height: 1.45;
  counter-increment: crm-automation-flow;
}

.crm-automation-flow__step::before {
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border: 1px solid color-mix(in oklch, var(--color-brand) 28%, var(--color-border));
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-brand) 8%, var(--color-surface));
  color: var(--color-brand-strong);
  font-size: var(--text-x-small);
  font-weight: 750;
  content: counter(crm-automation-flow);
}

.crm-automation-flow__step strong {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
}

.crm-automation-flow__step span {
  grid-column: 2;
}

.crm-admin-guidance {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .crm-admin-guidance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-admin-guidance--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.crm-admin-guidance__item {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  line-height: 1.45;
}

.crm-admin-guidance__item strong {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 650;
}

.crm-admin-form-intro {
  display: grid;
  gap: 0.25rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--color-border);
}

.crm-admin-form-intro__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 650;
}

.crm-admin-form-intro__copy {
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.crm-admin-form-tip {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem;
  border: 1px solid color-mix(in oklch, var(--color-brand) 24%, var(--color-border));
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-brand) 5%, var(--color-surface));
}

.crm-admin-form-tip__title {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 650;
}

.crm-admin-form-tip__copy {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.crm-automation-rule-row {
  display: grid;
  gap: 0.125rem;
  min-inline-size: 11rem;
}

.crm-automation-rule-row__name {
  color: var(--color-link);
  font-weight: 650;
  text-decoration: none;
}

.crm-automation-rule-row__name:hover {
  text-decoration: underline;
}

.crm-automation-rule-row__meta,
.crm-automation-rule-row__trigger {
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  line-height: 1.35;
}

.crm-rule-builder {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
}

.crm-rule-builder [hidden] {
  display: none !important;
}

.crm-rule-builder__map {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.375rem;
  align-items: center;
  padding-block: 0.125rem 0.5rem;
  border-block-end: 1px solid var(--color-border);
}

.crm-rule-builder__map-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-inline-size: 0;
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 650;
  line-height: 1.25;
}

.crm-rule-builder__map-item::before {
  flex: 0 0 auto;
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-brand) 42%, var(--color-border-medium));
  content: "";
}

@media (max-width: 700px) {
  .crm-rule-builder__map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.crm-rule-builder__steps {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
  padding: 0.375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

@media (min-width: 700px) {
  .crm-rule-builder__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.crm-rule-builder__step {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
  min-inline-size: 0;
  min-block-size: 2.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-ink-light);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 650;
  text-align: start;
  cursor: pointer;
}

.crm-rule-builder__step > span:last-child {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.crm-rule-builder__step:hover,
.crm-rule-builder__step--current {
  border-color: var(--color-border-medium);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.crm-rule-builder__step:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.crm-rule-builder__step-number {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
}

.crm-rule-builder__step--current .crm-rule-builder__step-number {
  background: var(--color-brand);
  color: var(--color-ink-inverted);
}

.crm-rule-builder__panel {
  display: grid;
  gap: 1.125rem;
  min-inline-size: 0;
  padding-block-start: 0.25rem;
}

.crm-rule-builder__panel-layout {
  display: grid;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 1100px) {
  .crm-rule-builder__panel-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.32fr);
  }
}

.crm-rule-builder__panel-main {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
}

.crm-rule-builder__section-heading {
  display: grid;
  gap: 0.25rem;
}

.crm-rule-builder__section-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
}

.crm-rule-builder__section-copy,
.crm-rule-builder__review-copy,
.crm-rule-definition__empty {
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.crm-rule-builder__rows {
  display: grid;
  gap: 0.875rem;
}

.crm-rule-builder__actions {
  counter-reset: crm-rule-action;
}

.crm-rule-builder__row {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.crm-rule-builder__action-row {
  counter-increment: crm-rule-action;
}

.crm-rule-builder__condition-row {
  gap: 0.625rem;
  padding: 0.75rem;
  border-color: var(--color-border-medium);
  background: var(--color-surface-muted);
}

.crm-rule-builder__row-heading {
  display: grid;
  gap: 0.125rem;
}

.crm-rule-builder__condition-header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  min-inline-size: 0;
}

.crm-rule-builder__row-title {
  display: grid;
  gap: 0.125rem;
  min-inline-size: 0;
}

.crm-rule-builder__row-heading strong {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
}

.crm-rule-builder__action-row .crm-rule-builder__row-heading strong::after {
  content: " " counter(crm-rule-action);
}

.crm-rule-builder__row-heading span {
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  line-height: 1.4;
}

.crm-rule-builder__row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.crm-rule-builder__row-grid--advanced-action {
  padding-block-start: 0.75rem;
}

.crm-rule-builder__condition-row .crm-rule-builder__row-grid {
  gap: 0.625rem;
}

.crm-rule-builder__condition-value:has(> .crm-rule-builder__condition-value-header),
.crm-rule-builder__field-with-action:has(> .crm-rule-builder__condition-value-header) {
  position: relative;
  padding-block-start: 1.5rem;
}

.crm-rule-builder__condition-value-header {
  display: block;
  padding-inline-end: 2.25rem;
}

.crm-rule-builder__condition-value-header + .form-field__control {
  margin-block-start: 0.5rem;
}

.crm-rule-builder__condition-value-action {
  display: inline-grid;
  place-items: center;
  position: absolute;
  inset-block-start: 1.375rem;
  inset-inline-end: 0;
  inline-size: 1.75rem;
  block-size: 1.5rem;
  padding: 0;
}

.crm-rule-builder__condition-value-action .icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@media (min-width: 760px) {
  .crm-rule-builder__row-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-rule-builder__row-grid--condition {
    grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1fr);
  }
}

.crm-rule-builder__action-toolbar {
  display: grid;
  gap: 0.75rem;
}

.crm-rule-builder__advanced {
  min-inline-size: 0;
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 0.25rem;
}

.crm-rule-builder__advanced-summary {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--color-ink-light);
  cursor: pointer;
  font-size: var(--text-small);
  list-style: none;
}

.crm-rule-builder__advanced-summary::-webkit-details-marker {
  display: none;
}

.crm-rule-builder__advanced-summary::before {
  flex: 0 0 auto;
  color: var(--color-ink-lighter);
  content: ">";
}

.crm-rule-builder__advanced[open] .crm-rule-builder__advanced-summary::before {
  transform: rotate(90deg);
}

.crm-rule-builder__advanced-summary strong {
  color: var(--color-ink);
  font-size: var(--text-small);
}

.crm-rule-builder__advanced-summary span {
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  line-height: 1.35;
}

@media (max-width: 640px) {
  .crm-rule-builder__advanced-summary {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crm-rule-builder__advanced-summary span {
    grid-column: 2;
  }
}

@media (min-width: 760px) {
  .crm-rule-builder__action-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.crm-rule-builder__row-actions,
.crm-rule-builder__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.crm-rule-builder__row-footer {
  display: flex;
  justify-content: flex-start;
}

.crm-rule-builder__add-row {
  justify-self: start;
}

.crm-rule-builder__add-row .icon,
.crm-rule-builder__remove-row .icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.crm-rule-builder__remove-row {
  flex: 0 0 auto;
  min-block-size: 2rem;
  padding-inline: 0.625rem;
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink-light);
  box-shadow: none;
}

.crm-rule-builder__remove-row:focus-visible {
  border-color: var(--color-danger);
  box-shadow: var(--shadow-focus-brand-soft);
}

.crm-rule-builder__remove-row:hover {
  border-color: color-mix(in oklch, var(--color-danger) 35%, var(--color-border-medium));
  background: color-mix(in oklch, var(--color-danger) 6%, var(--color-surface));
  color: var(--color-danger-strong);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 520px) {
  .crm-rule-builder__condition-header {
    display: grid;
  }

  .crm-rule-builder__remove-row {
    justify-self: start;
  }
}

.crm-rule-builder__navigation {
  justify-content: flex-end;
  padding-block-start: 0.5rem;
  border-block-start: 1px solid var(--color-border);
}

.crm-rule-builder__help {
  display: grid;
  gap: 0.375rem;
  align-self: start;
  min-inline-size: 0;
  padding: 0.875rem;
  border: 1px solid color-mix(in oklch, var(--color-info) 20%, var(--color-border));
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-info) 5%, var(--color-surface));
}

.crm-rule-builder__help strong {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
}

.crm-rule-builder__help p {
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.crm-rule-builder__review,
.crm-rule-definition {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.crm-rule-builder__review-block {
  display: grid;
  gap: 0.375rem;
  min-inline-size: 0;
}

.crm-rule-builder__review-title,
.crm-rule-definition__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
}

.crm-rule-builder__review-value {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.25;
}

.crm-rule-builder__review-actions {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding-inline-start: 1.25rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.crm-rule-definition__section {
  display: grid;
  gap: 0.625rem;
}

.crm-rule-definition__list,
.crm-rule-definition__actions {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.crm-rule-definition__item,
.crm-rule-definition__action {
  display: grid;
  gap: 0.125rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.crm-rule-definition__item dt,
.crm-rule-definition__action strong {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
}

.crm-rule-definition__item dd,
.crm-rule-definition__action span {
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.4;
}

.crm-rule-definition__actions {
  padding-inline-start: 1.25rem;
}

.lead-source-row__name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.lead-source-row__swatch {
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.lead-source-row__swatch--red,
.lead-source-row__swatch--rose {
  background: rgb(var(--palette-red-400));
}

.lead-source-row__swatch--green,
.lead-source-row__swatch--emerald,
.lead-source-row__swatch--lime {
  background: rgb(var(--palette-green-400));
}

.lead-source-row__swatch--yellow,
.lead-source-row__swatch--amber {
  background: rgb(var(--palette-amber-500));
}

.lead-source-row__swatch--orange {
  background: rgb(var(--palette-orange-500));
}

.lead-source-row__swatch--blue,
.lead-source-row__swatch--sky,
.lead-source-row__swatch--cyan {
  background: rgb(var(--palette-blue-500));
}

.lead-source-row__swatch--indigo,
.lead-source-row__swatch--violet {
  background: rgb(var(--palette-violet-500));
}

.lead-source-row__swatch--purple,
.lead-source-row__swatch--fuchsia {
  background: rgb(var(--palette-purple-400));
}

.lead-source-row__swatch--pink {
  background: rgb(var(--palette-pink-500));
}

.lead-source-row__swatch--teal {
  background: rgb(var(--palette-teal-500));
}

.lead-source-row__swatch--gray,
.lead-source-row__swatch--slate,
.lead-source-row__swatch--stone {
  background: var(--color-border-strong);
}

.crm-json-preview {
  overflow: auto;
  max-block-size: 24rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-ink-light);
  font-family: var(--font-mono);
  font-size: var(--text-x-small);
  line-height: 1.5;
  white-space: pre-wrap;
}

.crm-json-preview--compact {
  max-block-size: 10rem;
  padding: 0.75rem;
}

.crm-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block: 0.25rem;
}

.crm-dashboard-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 500;
}

.crm-dashboard-action:hover {
  background: var(--color-surface-muted);
}

.crm-dashboard-action__icon {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
}

.crm-dashboard-action__icon svg,
.crm-dashboard-inline-icon,
.opportunity-icon {
  inline-size: 1em;
  block-size: 1em;
}

.crm-dashboard-action__icon--customer {
  background: rgb(var(--palette-green-100));
  color: rgb(var(--palette-green-700));
}

.crm-dashboard-action__icon--opportunity {
  background: rgb(var(--palette-purple-100));
  color: rgb(var(--palette-purple-700));
}

.crm-dashboard-action__icon--assignment {
  background: rgb(var(--palette-yellow-100));
  color: rgb(var(--palette-yellow-700));
}

.crm-dashboard-grid {
  display: grid;
  gap: 1.5rem;
  margin-block-end: 1.5rem;
}

.crm-dashboard-grid--compact {
  gap: 1rem;
}

@media (min-width: 768px) {
  .crm-dashboard-grid--two,
  .crm-dashboard-grid--responsive-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .crm-dashboard-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-dashboard-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crm-dashboard-grid__span-two {
    grid-column: span 2;
  }
}

.crm-dashboard-split {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .crm-dashboard-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-dashboard-split__item--bordered {
    padding-inline-start: 1.5rem;
    border-inline-start: 1px solid var(--color-border);
  }
}

.crm-dashboard-stat {
  color: var(--color-ink);
  font-size: var(--text-xx-large);
  font-weight: 700;
}

.crm-dashboard-stat--medium {
  font-size: var(--text-large);
}

.crm-dashboard-stat--positive {
  color: var(--color-success-strong);
}

.crm-dashboard-stat--negative {
  color: var(--color-danger-strong);
}

.crm-dashboard-stat--accent {
  color: var(--color-brand-strong);
}

.crm-dashboard-label,
.crm-dashboard-caption,
.crm-dashboard-empty,
.crm-dashboard-meta {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
}

.crm-dashboard-label {
  margin-block: 0 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
}

.crm-dashboard-caption,
.crm-dashboard-meta {
  margin-block-start: 0.25rem;
}

.crm-dashboard-empty {
  margin: 0;
  padding-block: 1rem;
}

.crm-dashboard-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.crm-dashboard-row--center {
  align-items: center;
}

.crm-dashboard-row--left {
  justify-content: flex-start;
}

.crm-dashboard-row--spaced {
  margin-block-start: 0.5rem;
}

.crm-dashboard-row--stack {
  display: grid;
  gap: 1rem;
}

.crm-dashboard-row__end {
  text-align: end;
}

.crm-dashboard-list,
.crm-dashboard-list-divider {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-dashboard-list > * + *,
.crm-dashboard-list-divider > * + * {
  border-block-start: 1px solid var(--color-border-muted);
}

.crm-dashboard-list-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-inline: -0.5rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
}

.crm-dashboard-list-link:hover {
  background: var(--color-surface-muted);
}

.crm-dashboard-list-main {
  min-inline-size: 0;
}

.crm-dashboard-list-title {
  overflow: hidden;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-dashboard-list-text {
  overflow: hidden;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-dashboard-list-value {
  flex-shrink: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
}

.crm-dashboard-muted {
  color: var(--color-ink-lighter);
}

.crm-dashboard-positive {
  color: var(--color-success-strong);
}

.crm-dashboard-negative {
  color: var(--color-danger-strong);
}

.crm-dashboard-accent {
  color: var(--color-brand-strong);
}

.crm-dashboard-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-dashboard-conversion-list {
  display: grid;
  gap: 1rem;
}

.crm-dashboard-progress {
  overflow: hidden;
  inline-size: 100%;
  block-size: 0.5rem;
  border-radius: 99rem;
  background: var(--color-surface-muted);
}

.crm-dashboard-progress__bar {
  block-size: 100%;
  border-radius: inherit;
  transition: inline-size 150ms ease;
}

.crm-dashboard-progress__bar--red,
.crm-dashboard-progress__bar--rose {
  background: var(--color-danger-strong);
}

.crm-dashboard-progress__bar--green,
.crm-dashboard-progress__bar--emerald {
  background: var(--color-success-strong);
}

.crm-dashboard-progress__bar--yellow,
.crm-dashboard-progress__bar--amber {
  background: var(--color-warning);
}

.crm-dashboard-progress__bar--blue,
.crm-dashboard-progress__bar--sky,
.crm-dashboard-progress__bar--cyan {
  background: var(--color-info-strong);
}

.crm-dashboard-progress__bar--indigo,
.crm-dashboard-progress__bar--violet,
.crm-dashboard-progress__bar--purple,
.crm-dashboard-progress__bar--fuchsia,
.crm-dashboard-progress__bar--pink {
  background: var(--color-accent-strong);
}

.crm-dashboard-progress__bar--orange {
  background: rgb(var(--palette-orange-500));
}

.crm-dashboard-progress__bar--teal {
  background: rgb(var(--palette-teal-500));
}

.crm-dashboard-progress__bar--lime {
  background: rgb(var(--palette-lime-500));
}

.crm-dashboard-progress__bar--gray,
.crm-dashboard-progress__bar--slate {
  background: var(--color-ink-lighter);
}

.crm-dashboard-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.crm-dashboard-timeline__item {
  position: relative;
  padding-block-end: 1rem;
}

.crm-dashboard-timeline__line {
  position: absolute;
  inset-block-start: 1.25rem;
  inset-block-end: 0;
  inset-inline-start: 0.5rem;
  inline-size: 1px;
  background: var(--color-border);
}

.crm-dashboard-timeline__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.crm-dashboard-timeline__marker {
  flex-shrink: 0;
  margin-block-start: 0.125rem;
}

.crm-dashboard-timeline__body {
  min-inline-size: 0;
  flex: 1;
}

.crm-dashboard-timeline__copy {
  overflow: hidden;
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-dashboard-timeline__link {
  color: var(--color-ink);
  font-weight: 600;
}

.crm-dashboard-timeline__link:hover {
  text-decoration: underline;
}

.crm-dashboard-timeline__time {
  flex-shrink: 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
}

.crm-dashboard-attention summary {
  list-style: none;
}

.crm-dashboard-attention__summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-inline: -0.5rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.crm-dashboard-attention__summary:hover {
  background: var(--color-surface-muted);
}

.crm-dashboard-attention__icon {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
}

.crm-dashboard-attention__icon--warning {
  background: rgb(var(--palette-yellow-100));
  color: rgb(var(--palette-yellow-700));
}

.crm-dashboard-attention__icon--danger {
  background: rgb(var(--palette-red-100));
  color: rgb(var(--palette-red-700));
}

.crm-dashboard-attention__icon--neutral {
  background: var(--color-surface-muted);
  color: var(--color-ink-lighter);
}

.crm-dashboard-attention__label {
  flex: 1;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.crm-dashboard-attention__chevron {
  color: var(--color-ink-lighter);
  transition: transform 150ms ease;
}

.crm-dashboard-attention[open] .crm-dashboard-attention__chevron {
  transform: rotate(90deg);
}

.crm-dashboard-attention__list {
  margin: 0.25rem 0 0;
  padding-inline-start: 2.25rem;
  list-style: none;
}

.crm-dashboard-reasons {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .crm-dashboard-reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.crm-dashboard-reasons__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.5rem;
}

.crm-dashboard-reasons__name {
  min-inline-size: 0;
  flex: 1;
  overflow: hidden;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-dashboard-funnel {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  overflow-x: auto;
  padding-block-end: 0.5rem;
}

.crm-dashboard-funnel__stage {
  min-inline-size: 10rem;
  flex: 1;
}

.crm-dashboard-funnel__stage--empty {
  opacity: 0.6;
}

.crm-dashboard-funnel__link {
  display: block;
  block-size: 100%;
}

.crm-dashboard-funnel__card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

.crm-dashboard-funnel__link:hover .crm-dashboard-funnel__card {
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-md);
}

.crm-dashboard-funnel__header {
  overflow: hidden;
  padding: 0.625rem 0.75rem;
  text-align: center;
  font-size: var(--text-small);
  font-weight: 600;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.crm-dashboard-funnel__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 0.75rem;
  text-align: center;
}

.crm-dashboard-funnel__metric {
  text-align: center;
}

.crm-dashboard-funnel__amount {
  color: var(--color-ink);
  font-size: var(--text-xx-large);
  font-weight: 700;
  line-height: 1;
}

.crm-dashboard-funnel__count {
  color: var(--color-ink-light);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1;
}

.crm-dashboard-funnel__label {
  margin-block-start: 0.375rem;
  color: var(--color-ink-lighter);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}

.crm-dashboard-funnel__arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: var(--color-ink-lighter);
}

/* Opportunities */

.opportunity-page-intro {
  margin-block-start: 1.5rem;
  padding: 1.25rem 1rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

@media (min-width: 640px) {
  .opportunity-page-intro {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }
}

.opportunity-page-intro__layout {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 768px) {
  .opportunity-page-intro__layout {
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 2.2fr);
  }

  .opportunity-page-intro__body {
    min-inline-size: 0;
  }
}

.opportunity-page-intro__summary {
  display: grid;
  gap: 0.75rem;
}

.opportunity-page-intro__eyebrow {
  margin: 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
  text-transform: uppercase;
}

.opportunity-page-intro__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.opportunity-page-intro__copy {
  max-inline-size: 62ch;
  margin: 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  line-height: 1.5;
}

.opportunity-page-intro__copy > * {
  margin-block: 0;
}

.opportunity-page-intro__copy > * + * {
  margin-block-start: 0.5rem;
}

.opportunity-page-intro__facts {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--color-border);
}

.opportunity-page-intro__facts div {
  min-inline-size: 0;
}

.opportunity-page-intro__facts dt {
  margin: 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 600;
}

.opportunity-page-intro__facts dd {
  margin: 0.125rem 0 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.opportunity-form {
  display: grid;
  gap: 1.25rem;
  min-inline-size: 0;
}

@media (max-width: 639px) {
  .opportunity-form.form-frame {
    padding-inline: 1rem;
  }
}

.opportunity-form__sections {
  display: grid;
  gap: 1.25rem;
  min-inline-size: 0;
  inline-size: 100%;
}

.opportunity-form-section {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
  inline-size: 100%;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--color-border);
}

.opportunity-form-section__header {
  display: grid;
  gap: 0.25rem;
}

.opportunity-form-section__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.25;
}

.opportunity-form-section__help,
.opportunity-lines-card__help {
  max-inline-size: 68ch;
  margin: 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  line-height: 1.45;
}

.opportunity-filter-grid,
.opportunity-form-grid,
.opportunity-close-form-grid {
  display: grid;
  gap: 1rem;
}

.opportunity-filter {
  display: grid;
  gap: 1rem;
}

.opportunity-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  align-items: start;
  gap: 0.875rem;
}

.opportunity-filter__field {
  min-inline-size: 0;
}

.opportunity-filter__field .form-field__label {
  margin-block-end: 0.375rem;
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 650;
}

.opportunity-filter__field .input {
  min-block-size: 2.625rem;
  border-radius: var(--radius-md);
}

@media (min-width: 360px) {
  .opportunity-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .opportunity-filter__field--wide {
    grid-column: 1 / -1;
  }
}

.opportunity-form-grid {
  gap: 1rem 1.5rem;
  min-inline-size: 0;
  inline-size: 100%;
}

.opportunity-close-form-grid {
  margin-block-end: 1rem;
}

@media (min-width: 640px) {
  .opportunity-form-grid,
  .opportunity-close-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opportunity-form-grid__full {
    grid-column: span 2;
  }
}

@media (min-width: 768px) {
  .opportunity-filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.opportunity-filter-extra {
  display: grid;
  gap: 0.75rem;
  margin-block-start: 0.75rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--color-border);
}

@media (min-width: 520px) {
  .opportunity-filter-extra {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.opportunity-filter-extra[hidden] {
  display: none;
}

.opportunity-filter-actions,
.opportunity-form-actions,
.opportunity-modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-block-start: 1rem;
}

.opportunity-filter-actions {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 0;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--color-border);
}

.opportunity-filter-actions__clear {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.5rem;
  border-radius: var(--radius-md);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
}

.opportunity-filter-actions__clear:hover {
  color: var(--color-brand-strong);
  text-decoration: underline;
}

.opportunity-filter-actions__clear:focus-visible,
.opportunity-filter-actions__apply:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    var(--shadow-surface-outline),
    var(--shadow-focus-brand-soft);
}

.opportunity-form-actions {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-block-start: 0;
}

.opportunity-form-actions .btn {
  justify-content: center;
}

.opportunity-modal-actions {
  justify-content: flex-end;
}

.opportunity-lines-card {
  margin: 0;
  min-inline-size: 0;
  inline-size: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.opportunity-lines-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-block-end: 1px solid var(--color-border);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.opportunity-lines-card__title,
.opportunity-detail__title,
.opportunity-section-title {
  margin: 0;
  color: var(--color-ink);
  font-weight: 700;
}

.opportunity-lines-card__title {
  font-size: var(--text-medium);
}

.opportunity-lines-card__body {
  padding: 1rem;
}

@media (max-width: 639px) {
  .opportunity-lines-card__header {
    flex-direction: column;
    padding: 1rem;
  }

  .opportunity-lines-card__header .btn,
  .opportunity-form-actions .btn {
    inline-size: 100%;
  }
}

.opportunity-line-form {
  margin-block-end: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.opportunity-line-form__body {
  display: block;
}

.opportunity-line-form__grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  inline-size: 100%;
}

@media (min-width: 1024px) {
  .opportunity-line-form__quantity,
  .opportunity-line-form__price {
    inline-size: 8rem;
  }

  .opportunity-line-form__tax {
    inline-size: 10rem;
  }
}

.opportunity-line-form__name {
  position: relative;
  inline-size: 100%;
}

.opportunity-line-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .opportunity-line-form__fields {
    flex-direction: row;
  }
}

.opportunity-line-form__search-results {
  position: absolute;
  z-index: 50;
  margin-block-start: 0.25rem;
  inline-size: 80%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.opportunity-line-form__search-results-inner {
  padding: 0.75rem;
}

.opportunity-line-form__remove {
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-lg);
  color: var(--color-ink-lighter);
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.opportunity-line-form__remove:hover {
  background: rgb(var(--palette-red-100));
  color: var(--color-danger-strong);
}

.opportunity-line-form__remove:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    var(--shadow-surface-outline),
    var(--shadow-focus-brand-soft);
}

.opportunity-detail {
  display: grid;
  gap: 1.25rem;
  min-inline-size: 0;
}

.opportunity-detail__header {
  display: grid;
  gap: 1rem;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
  .opportunity-detail__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
  }
}

.opportunity-detail__identity {
  min-inline-size: 0;
}

.opportunity-detail__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem;
  margin-block-end: 0.375rem;
}

.opportunity-detail__title {
  min-inline-size: 0;
  font-size: var(--text-x-large);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.opportunity-detail__description {
  max-inline-size: 72ch;
  margin-block-start: 0.5rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.5;
}

.opportunity-detail__description > * {
  margin-block: 0;
}

.opportunity-detail__description > * + * {
  margin-block-start: 0.5rem;
}

.opportunity-detail__actions {
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 1024px) {
  .opportunity-detail__actions {
    justify-content: flex-end;
  }
}

.opportunity-detail__layout {
  display: grid;
  gap: 1.25rem;
  min-inline-size: 0;
}

@media (min-width: 1024px) {
  .opportunity-detail__layout {
    grid-template-columns: minmax(0, 2.35fr) minmax(18rem, 0.85fr);
    align-items: start;
  }
}

.opportunity-detail__main {
  display: grid;
  gap: 1.25rem;
  min-inline-size: 0;
}

.opportunity-detail__aside {
  min-inline-size: 0;
}

@media (min-width: 1024px) {
  .opportunity-detail__aside {
    position: sticky;
    inset-block-start: 1rem;
  }
}

.opportunity-detail__section {
  display: grid;
  gap: 0.75rem;
  min-inline-size: 0;
}

.opportunity-detail__section-title,
.opportunity-stat__label {
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 700;
  text-transform: uppercase;
}

.opportunity-stat-grid {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.opportunity-stat-grid--three {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .opportunity-stat-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opportunity-stat-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.opportunity-stat {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  min-block-size: 5.25rem;
  padding: 0.875rem;
  background: var(--color-surface);
}

.opportunity-stat + .opportunity-stat {
  border-block-start: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .opportunity-stat + .opportunity-stat {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }
}

.opportunity-stat__label {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
  text-transform: none;
}

.opportunity-stat__value {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 650;
  line-height: 1.25;
}

.opportunity-stat__value-main {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-stat__meta {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 500;
}

.opportunity-detail-note {
  display: grid;
  gap: 0.5rem;
  padding: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.opportunity-detail-note__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
}

.opportunity-detail-note__body {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.5;
}

.opportunity-detail-note__body > * {
  margin-block: 0;
}

.opportunity-detail-note__body > * + * {
  margin-block-start: 0.5rem;
}

.opportunity-lines-table-wrap {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.opportunity-lines-table,
.opportunity-table {
  min-inline-size: 100%;
  border-collapse: collapse;
}

.opportunity-lines-table thead,
.opportunity-table thead {
  background: var(--color-surface-muted);
}

.opportunity-lines-table tbody > tr + tr,
.opportunity-table tbody > tr + tr {
  border-block-start: 1px solid var(--color-border-muted);
}

.opportunity-table tbody {
  background: var(--color-surface);
}

.opportunity-table__row:hover {
  background: var(--color-surface-muted);
}

.opportunity-table__empty {
  padding-block: 3rem;
  text-align: center;
}

.opportunity-table__next {
  display: flex;
  justify-content: center;
  margin-block-start: 1.5rem;
}

.opportunity-table__next-link,
.opportunity-kanban__load-more {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--color-brand-strong);
  font-size: var(--text-small);
}

.opportunity-table__next-link {
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink-light);
}

.opportunity-table__next-link:hover,
.opportunity-kanban__load-more:hover {
  background: var(--color-surface-muted);
}

.opportunity-table__sort-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.opportunity-table__sort-link:hover,
.opportunity-link:hover {
  text-decoration: underline;
}

.opportunity-table__sort-link--right {
  justify-content: flex-end;
  inline-size: 100%;
}

.opportunity-table__sort-indicator {
  color: var(--color-brand-strong);
  font-size: 0.65rem;
}

.opportunity-kanban {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-block: 0.25rem 0.875rem;
  scroll-padding-inline: 0.25rem;
  scroll-snap-type: inline proximity;
}

.opportunity-kanban__column-frame {
  flex: 0 0 min(22.5rem, calc((100% - 3rem) / 4));
  min-inline-size: min(19.5rem, 84vw);
  scroll-snap-align: start;
}

.opportunity-kanban__loading {
  min-block-size: 18rem;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  animation: pulse 1.5s ease-in-out infinite;
}

.opportunity-kanban-shell {
  display: grid;
  gap: 1rem;
}

.opportunity-kanban-shell__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block-end: 0.875rem;
  border-block-end: 1px solid var(--color-border);
}

.opportunity-kanban-shell__title {
  font-size: var(--text-medium);
  font-weight: 700;
}

.opportunity-kanban-shell__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-inline-size: 32rem;
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.35;
}

.opportunity-kanban-shell__hint .icon {
  inline-size: 1rem;
  block-size: 1rem;
  opacity: 0.78;
}

.opportunity-kanban-column,
.opportunity-kanban-column.list-column {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-block-size: 19rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--opportunity-stage-color) 7%, transparent), transparent 7rem),
    var(--color-surface-muted);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.opportunity-kanban-column__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 0.875rem 0.75rem;
  border-block-end: 1px solid var(--color-border);
  background: color-mix(in oklch, var(--color-surface) 92%, var(--opportunity-stage-color));
}

.opportunity-kanban-column__heading {
  display: flex;
  min-inline-size: 0;
  align-items: flex-start;
  gap: 0.625rem;
}

.opportunity-kanban-column__title-wrap {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.opportunity-kanban-column__dot {
  flex: 0 0 auto;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  margin-block-start: 0.1875rem;
  border-radius: var(--radius-pill);
  background: var(--opportunity-stage-color, var(--color-ink-lighter));
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--opportunity-stage-color) 16%, var(--color-surface)),
    var(--shadow-sm);
}

.opportunity-kanban-column__title {
  min-inline-size: 0;
  margin: 0;
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
}

.opportunity-kanban-column__name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-kanban-column__probability {
  color: var(--color-ink-lighter);
  font-size: var(--text-xx-small);
  font-weight: 650;
}

.opportunity-kanban-column__count {
  flex: 0 0 auto;
  min-inline-size: 2rem;
  border: 1px solid color-mix(in oklch, var(--opportunity-stage-color) 18%, var(--color-border));
  border-radius: var(--radius-md);
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-x-small);
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.opportunity-kanban-column__cards {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  min-block-size: 11rem;
  padding: 0.875rem;
}

.opportunity-kanban-column__cards--empty {
  align-content: stretch;
}

.opportunity-kanban-column__cards--empty::before {
  display: grid;
  min-block-size: 8rem;
  place-items: center;
  border: 1px dashed color-mix(in oklch, var(--opportunity-stage-color) 26%, var(--color-border-medium));
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--opportunity-stage-color) 5%, var(--color-surface));
  color: var(--color-ink-lighter);
  content: attr(data-empty-message);
  font-size: var(--text-small);
  font-weight: 600;
  text-align: center;
}

.opportunity-kanban-column__more {
  padding: 0 0.875rem 0.875rem;
  text-align: center;
}

.opportunity-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.opportunity-card::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 0.1875rem;
  background: var(--opportunity-stage-color, var(--color-border-strong));
  content: "";
  opacity: 0.86;
}

.opportunity-card:hover {
  border-color: color-mix(in oklch, var(--opportunity-stage-color) 28%, var(--color-border-strong));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.opportunity-card--closed {
  background: var(--color-surface-muted);
  opacity: 0.82;
}

.opportunity-card__body {
  display: grid;
  gap: 0.75rem;
  padding: 0.875rem;
  padding-block-start: 1rem;
}

.opportunity-card__header,
.opportunity-card__footer,
.opportunity-card__badges,
.opportunity-action-buttons,
.opportunity-picker__header,
.opportunity-picker__inline-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.opportunity-card__header,
.opportunity-card__footer,
.opportunity-picker__header,
.opportunity-picker__inline-form {
  justify-content: space-between;
}

.opportunity-card__header {
  align-items: flex-start;
  gap: 0.625rem;
}

.opportunity-card__identity {
  display: grid;
  flex: 1 1 auto;
  gap: 0.375rem;
  min-inline-size: 0;
}

.opportunity-card__badges {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-inline-size: 8.5rem;
  gap: 0.25rem;
}

.opportunity-card__title {
  min-inline-size: 0;
  color: var(--color-brand-strong);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.opportunity-card__title:hover {
  color: var(--color-link);
  text-decoration: underline;
}

.opportunity-card__title:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-brand-soft);
}

.opportunity-card__customer {
  display: inline-flex;
  min-inline-size: 0;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  line-height: 1.35;
}

.opportunity-card__customer .icon,
.opportunity-card__date .icon,
.opportunity-card__drag-hint .icon,
.opportunity-badge .icon {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.opportunity-card__customer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-card__footer {
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 0.125rem;
  padding-block-start: 0.625rem;
  border-block-start: 1px solid var(--color-border);
}

.opportunity-card__owner,
.opportunity-card__facts {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  gap: 0.375rem;
}

.opportunity-card__owner {
  flex: 1 1 auto;
}

.opportunity-card__facts {
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-muted) 70%, var(--color-surface));
}

.opportunity-card__owner-name {
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-ink-lighter);
  font-size: var(--text-xx-small);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-xx-small);
  font-weight: 600;
}

.opportunity-card__amount {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.2;
}

.opportunity-card__drag-hint {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--radius-md);
  color: var(--color-ink-lighter);
}

.opportunity-table__amount {
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 600;
}

.opportunity-card__amount--positive,
.opportunity-table__amount--positive {
  color: var(--color-success-strong);
}

.opportunity-card__amount--muted,
.opportunity-table__amount--muted {
  color: var(--color-ink-lighter);
}

.opportunity-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: 600;
}

.opportunity-badge--rounded {
  border-radius: 99rem;
  padding-inline: 0.5rem;
  font-size: var(--text-x-small);
  font-weight: 500;
}

.opportunity-badge--won,
.opportunity-status-badge--won {
  background: rgb(var(--palette-green-100));
  color: var(--color-success-strong);
}

.opportunity-badge--lost,
.opportunity-status-badge--lost,
.opportunity-badge--danger {
  background: rgb(var(--palette-red-100));
  color: var(--color-danger-strong);
}

.opportunity-badge--open,
.opportunity-status-badge--open {
  background: var(--color-surface-muted);
  color: var(--color-ink-light);
}

.opportunity-badge--warning {
  background: rgb(var(--palette-yellow-100));
  color: rgb(var(--palette-yellow-800));
}

.opportunity-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 99rem;
  font-size: var(--text-x-small);
  font-weight: 600;
}

.opportunity-status-badge--won {
  border-color: rgb(var(--palette-green-200));
}

.opportunity-status-badge--lost {
  border-color: rgb(var(--palette-red-200));
}

.opportunity-link {
  color: var(--color-brand-strong);
  font-size: var(--text-small);
  font-weight: 600;
}

.opportunity-cell-muted {
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.opportunity-cell-subtle {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
}

.opportunity-stage-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.75rem;
}

.opportunity-stage-current__label {
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 700;
  text-transform: uppercase;
}

.opportunity-stage-panel {
  min-inline-size: 0;
  padding: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.opportunity-stage-path {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding-block: 0.5rem 0.25rem;
  scroll-padding-inline: 0.5rem;
  scroll-snap-type: inline proximity;
}

.opportunity-stage-path__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  min-inline-size: 5rem;
  scroll-snap-align: start;
}

.opportunity-stage-path__track {
  display: flex;
  align-items: center;
  inline-size: 100%;
  block-size: 2.5rem;
}

.opportunity-stage-path__line {
  flex: 1;
  block-size: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-border);
}

.opportunity-stage-path__line--complete {
  background: var(--color-success);
}

.opportunity-stage-path__dot {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-surface);
}

.opportunity-stage-path__dot--current {
  border: 0;
  color: var(--color-surface);
  box-shadow:
    0 0 0 0.25rem var(--color-surface),
    0 0 0 0.375rem color-mix(in srgb, var(--color-brand) 22%, transparent);
}

.opportunity-stage-path__dot--complete {
  border: 0;
  background: var(--color-success);
  color: var(--color-surface);
}

.opportunity-stage-path__dot--clickable {
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.opportunity-stage-path__dot--clickable:hover {
  border-color: var(--color-brand);
  background: var(--color-surface-subtle);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.opportunity-stage-path__dot--clickable:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    var(--shadow-surface-outline),
    var(--shadow-focus-brand-soft);
}

.opportunity-stage-path__label {
  color: var(--color-ink-lighter);
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
}

.opportunity-stage-path__label--current {
  color: var(--color-ink);
  font-weight: 600;
}

.opportunity-stage-path__label--complete {
  color: var(--color-success-strong);
}

.opportunity-action-buttons {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.opportunity-action-buttons form {
  margin: 0;
}

@media (min-width: 1024px) {
  .opportunity-action-buttons {
    justify-content: flex-end;
  }
}

.opportunity-picker {
  padding-block-start: 1.5rem;
}

.opportunity-picker__inline {
  margin-block-start: 0.5rem;
}

.opportunity-picker__error {
  margin-block-start: 0.25rem;
  color: var(--color-danger-strong);
  font-size: var(--text-small);
}

.opportunity-stage-change {
  margin-block-end: 1rem;
}

.opportunity-stage-change__value {
  color: var(--color-ink);
  font-size: var(--text-normal);
  font-weight: 600;
}

.opportunity-timeline {
  display: grid;
  gap: 0;
}

.opportunity-timeline__entry {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding-block: 0.75rem;
  padding-inline: 0;
  border-block-start: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-ink-light);
}

.opportunity-timeline__entry:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.opportunity-timeline__entry--won {
  border-color: rgb(var(--palette-green-200));
  color: var(--color-success-strong);
}

.opportunity-timeline__entry--lost {
  border-color: rgb(var(--palette-red-200));
  color: var(--color-danger-strong);
}

.opportunity-timeline__entry--red,
.opportunity-timeline__entry--rose {
  border-color: rgb(var(--palette-red-200));
}

.opportunity-timeline__entry--green,
.opportunity-timeline__entry--emerald,
.opportunity-timeline__entry--lime {
  border-color: rgb(var(--palette-green-200));
}

.opportunity-timeline__entry--yellow,
.opportunity-timeline__entry--amber {
  border-color: rgb(var(--palette-yellow-200));
}

.opportunity-timeline__entry--orange {
  border-color: rgb(var(--palette-orange-200));
}

.opportunity-timeline__entry--blue,
.opportunity-timeline__entry--sky,
.opportunity-timeline__entry--cyan {
  border-color: rgb(var(--palette-blue-200));
}

.opportunity-timeline__entry--indigo,
.opportunity-timeline__entry--violet {
  border-color: rgb(var(--palette-violet-200));
}

.opportunity-timeline__entry--purple,
.opportunity-timeline__entry--fuchsia {
  border-color: rgb(var(--palette-purple-200));
}

.opportunity-timeline__entry--pink {
  border-color: rgb(var(--palette-pink-200));
}

.opportunity-timeline__entry--teal {
  border-color: rgb(var(--palette-teal-200));
}

.opportunity-timeline__entry--gray,
.opportunity-timeline__entry--slate,
.opportunity-timeline__entry--white,
.opportunity-timeline__entry--black {
  border-color: var(--color-border);
}

.opportunity-timeline__body {
  min-inline-size: 0;
}

.opportunity-timeline__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
}

.opportunity-timeline__meta {
  margin: 0.25rem 0 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
}

.opportunity-activity {
  display: grid;
  gap: 0.875rem;
  padding: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.opportunity-activity__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.25;
}

.hide-on-mobile {
  display: none;
}

@media (min-width: 1024px) {
  .hide-on-mobile {
    display: inline-flex;
  }
}

/* CRM customer stage selector (pipeline visualization on customer show) */

.crm-stage-selector {
  margin-block-start: 2rem;
}

.crm-stage-selector .hidden {
  display: none;
}

.crm-stage-selector__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}

.crm-stage-selector__header-label {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 500;
}

.crm-stage-selector__header-empty {
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
}

.crm-stage-selector__pipeline {
  display: flex;
  align-items: flex-start;
  inline-size: 100%;
  overflow-x: auto;
  padding-block: 0.75rem;
}

.crm-stage-selector__station {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  min-inline-size: 5rem;
}

.crm-stage-selector__track {
  display: flex;
  align-items: center;
  inline-size: 100%;
  block-size: 2.5rem;
}

.crm-stage-selector__line {
  flex: 1;
  block-size: 2px;
  border-radius: var(--radius-sm);
  background: var(--color-border);
}

.crm-stage-selector__line--complete {
  background: var(--color-success);
}

.crm-stage-selector__line--edge {
  background: transparent;
}

.crm-stage-selector__dot {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-surface);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.crm-stage-selector__dot--current {
  border: 0;
  background: var(--color-brand);
  color: var(--color-surface);
  box-shadow: 0 0 0.5rem color-mix(in srgb, var(--color-brand) 40%, transparent);
  cursor: default;
}

.crm-stage-selector__dot--complete {
  border: 0;
  background: var(--color-success);
  color: var(--color-surface);
  cursor: pointer;
}

.crm-stage-selector__dot--complete:hover {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-success) 25%, transparent);
}

.crm-stage-selector__dot--future {
  cursor: pointer;
}

.crm-stage-selector__dot--future:hover {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.crm-stage-selector__dot-icon {
  inline-size: 1rem;
  block-size: 1rem;
}

.crm-stage-selector__label {
  color: var(--color-ink-lighter);
  font-size: 0.7rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.crm-stage-selector__label--current {
  color: var(--color-ink);
  font-weight: 600;
}

.crm-stage-selector__label--complete {
  color: var(--color-success-strong);
}

.crm-stage-selector__note-form {
  margin-block-start: 0.75rem;
}

.crm-stage-selector__note-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.crm-stage-selector__note-label {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 500;
}

.crm-stage-selector__note-input {
  flex: 1;
  min-inline-size: 12rem;
  padding-block: 0.375rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-small);
}

.crm-stage-selector__note-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.crm-stage-selector--compact {
  margin-block-start: 0;
}

.crm-stage-selector--compact .hidden {
  display: none;
}

.crm-stage-selector__current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.crm-stage-selector__menu-wrap {
  position: relative;
}

.crm-stage-selector__summary {
  cursor: pointer;
  list-style: none;
}

.crm-stage-selector__summary::-webkit-details-marker {
  display: none;
}

.crm-stage-selector__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-end: 0;
  z-index: 10;
  display: grid;
  min-inline-size: 13rem;
  overflow: hidden;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.crm-stage-selector__option {
  display: flex;
  inline-size: 100%;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-block-end: 1px solid var(--color-border);
  background: transparent;
  padding-block: 0.65rem;
  padding-inline: 0.75rem;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.crm-stage-selector__option:last-child {
  border-block-end: 0;
}

.crm-stage-selector__option:hover,
.crm-stage-selector__option:focus-visible {
  background: var(--color-surface-muted);
  outline: 0;
}

.crm-stage-selector__option--active,
.crm-stage-selector__option:disabled {
  background: color-mix(in oklch, var(--color-brand) 8%, var(--color-surface));
  color: var(--color-brand-strong);
  cursor: default;
  font-weight: 700;
}

.crm-stage-selector__option-label {
  overflow-wrap: anywhere;
}

.crm-stage-selector--compact .crm-stage-selector__note-form {
  inline-size: 100%;
}

/* CRM customer activity timeline (combined stage changes + comments + creation) */

.crm-activity-timeline__list {
  display: grid;
  gap: 0.625rem;
}

.crm-activity-timeline__entry {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding-block: 0.625rem;
  padding-inline: 0;
  border: 1px solid var(--color-border);
  border-inline: 0;
  border-block-end: 0;
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-ink-light);
}

.crm-activity-timeline__entry:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.crm-activity-timeline__entry--stage {
  border-color: var(--color-border);
  background: transparent;
}

.crm-activity-timeline__indicator {
  flex-shrink: 0;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-block-start: 0.5rem;
  border-radius: 50%;
  background: var(--color-ink-lighter);
}

.crm-activity-timeline__indicator--comment {
  background: var(--color-accent);
}

.crm-activity-timeline__indicator--created {
  background: var(--color-info-strong);
}

.crm-activity-timeline__body {
  min-inline-size: 0;
  flex: 1;
}

.crm-activity-timeline__text {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-x-small);
}

.crm-activity-timeline__strong {
  font-weight: 600;
}

.crm-activity-timeline__note {
  margin: 0.25rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-xx-small);
  font-style: italic;
}

.crm-activity-timeline__meta {
  margin: 0.25rem 0 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-xx-small);
}

/* Stage colour tints for stage_change entries — uses BEM modifier per colour to
   produce a soft tinted background/border, mirroring badges.css colour palette
   while keeping the timeline visually distinct from inline pill badges. */

.crm-activity-timeline__entry--red {
  border-color: rgb(var(--palette-red-200));
  background: transparent;
}

.crm-activity-timeline__entry--rose {
  border-color: rgb(var(--palette-red-200));
  background: transparent;
}

.crm-activity-timeline__entry--green,
.crm-activity-timeline__entry--emerald,
.crm-activity-timeline__entry--lime {
  border-color: rgb(var(--palette-green-200));
  background: transparent;
}

.crm-activity-timeline__entry--yellow,
.crm-activity-timeline__entry--amber {
  border-color: rgb(var(--palette-yellow-200));
  background: transparent;
}

.crm-activity-timeline__entry--orange {
  border-color: rgb(var(--palette-orange-200));
  background: transparent;
}

.crm-activity-timeline__entry--blue,
.crm-activity-timeline__entry--sky,
.crm-activity-timeline__entry--cyan {
  border-color: rgb(var(--palette-blue-200));
  background: transparent;
}

.crm-activity-timeline__entry--indigo,
.crm-activity-timeline__entry--violet {
  border-color: rgb(var(--palette-violet-200));
  background: transparent;
}

.crm-activity-timeline__entry--purple,
.crm-activity-timeline__entry--fuchsia {
  border-color: rgb(var(--palette-purple-200));
  background: transparent;
}

.crm-activity-timeline__entry--pink {
  border-color: rgb(var(--palette-pink-200));
  background: transparent;
}

.crm-activity-timeline__entry--teal {
  border-color: rgb(var(--palette-teal-200));
  background: transparent;
}

.crm-activity-timeline__entry--gray,
.crm-activity-timeline__entry--slate,
.crm-activity-timeline__entry--white,
.crm-activity-timeline__entry--black {
  border-color: var(--color-border);
  background: transparent;
}

/* CRM customer detail (show page: summary, primary work, secondary activity) */

.crm-customer-detail {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.crm-customer-detail--agile {
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .crm-customer-detail {
    grid-template-columns: minmax(0, 2.4fr) minmax(18rem, 0.9fr);
    align-items: start;
  }
}

.crm-customer-profile {
  display: grid;
  gap: 1rem;
  align-items: end;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--color-border);
}

.crm-customer-profile--agile {
  align-items: start;
}

@media (min-width: 1024px) {
  .crm-customer-profile {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.crm-customer-profile__identity {
  min-inline-size: 0;
}

.crm-customer-profile__eyebrow {
  margin: 0 0 0.25rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 500;
}

.crm-customer-profile__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.crm-customer-profile__meta {
  margin: 0.375rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}

.crm-customer-profile__meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-block-start: 0.375rem;
}

.crm-customer-profile__meta-list .crm-customer-profile__meta {
  margin: 0;
}

.crm-customer-profile__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.crm-customer-profile__signals {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

@media (min-width: 640px) {
  .crm-customer-profile__signals {
    grid-template-columns: repeat(3, minmax(8rem, 1fr));
  }
}

.crm-customer-profile__signal {
  min-inline-size: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.crm-customer-profile__signal dt {
  margin: 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 500;
}

.crm-customer-profile__signal dd {
  margin: 0.25rem 0 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.crm-customer-profile__signals--compact {
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .crm-customer-profile__signals--compact {
    grid-template-columns: repeat(2, minmax(8rem, 12rem));
  }
}

.crm-customer-detail__main {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
}

.crm-customer-detail__side {
  min-inline-size: 0;
}

.crm-customer-section {
  min-inline-size: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.crm-customer-section--activity {
  position: sticky;
  inset-block-start: 1rem;
}

@media (max-width: 1023px) {
  .crm-customer-section--activity {
    position: static;
  }
}

.crm-customer-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-end: 0.875rem;
}

.crm-customer-section__header--split {
  align-items: flex-start;
}

.crm-customer-section__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-normal);
  font-weight: 650;
  line-height: 1.25;
}

.crm-customer-section__hint {
  max-inline-size: 58ch;
  margin: 0.3rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.4;
}

.crm-customer-section__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.crm-customer-section .crm-stage-selector {
  margin-block-start: 0;
}

.crm-customer-section--comments .comments {
  margin-block-start: 0;
}

.crm-customer-section--comments .comments-panel {
  gap: 0.875rem;
}

.crm-customer-section--comments .comment-form {
  margin-block-start: 0;
}

.crm-customer-quick-contact {
  display: grid;
  gap: 1rem;
}

.crm-customer-quick-contact__methods {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.crm-customer-quick-contact__method {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
  padding-block: 0.75rem;
  padding-inline: 0.875rem;
  border-block-start: 1px solid var(--color-border);
}

.crm-customer-quick-contact__method:first-child {
  border-block-start: 0;
}

.crm-customer-quick-contact__label,
.crm-customer-secondary-details__item dt {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
  line-height: 1.2;
}

.crm-customer-quick-contact__link {
  color: var(--color-brand-strong);
  font-size: var(--text-small);
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.crm-customer-quick-contact__link:hover,
.crm-customer-quick-contact__link:focus-visible {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.crm-customer-quick-contact__value,
.crm-customer-quick-contact__empty,
.crm-customer-secondary-details__item dd {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.crm-customer-quick-contact__empty {
  color: var(--color-ink-lighter);
  font-weight: 500;
}

.crm-customer-quick-contact__phones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.crm-customer-quick-contact__people {
  display: grid;
  gap: 0.625rem;
}

.crm-customer-quick-contact__subtitle {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.25;
}

.crm-customer-quick-contact__contact-list {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--color-border);
}

.crm-customer-quick-contact__person {
  display: grid;
  gap: 0.625rem;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--color-border);
}

.crm-customer-quick-contact__person-main {
  min-inline-size: 0;
}

.crm-customer-quick-contact__person-name {
  display: block;
  color: var(--color-ink);
  font-size: var(--text-small);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.crm-customer-quick-contact__person-title {
  display: block;
  margin-block-start: 0.15rem;
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.crm-customer-quick-contact__person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.crm-customer-quick-contact__empty-note {
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.4;
}

.crm-customer-secondary-details {
  display: grid;
  gap: 0;
  margin: 0;
}

.crm-customer-secondary-details__item {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.75rem;
  border-block-start: 1px solid var(--color-border);
}

.crm-customer-secondary-details__item:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

@media (min-width: 768px) {
  .crm-customer-quick-contact__methods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crm-customer-quick-contact__method {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }

  .crm-customer-quick-contact__method:first-child {
    border-inline-start: 0;
  }

  .crm-customer-quick-contact__person {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, auto);
    align-items: center;
  }

  .crm-customer-quick-contact__person-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 767px) {
  .crm-customer-section__header--split {
    flex-direction: column;
  }

  .crm-customer-section__actions,
  .crm-customer-section__actions .btn {
    inline-size: 100%;
    justify-content: center;
  }
}

/* CRM customer info cards (grouped customer data shown as labelled fields) */

.crm-customer-info-cards {
  display: grid;
  gap: 0.875rem;
}

.crm-customer-info-cards__group {
  display: grid;
  gap: 0.5rem;
}

.crm-customer-info-cards__title {
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 650;
}

.crm-customer-info-cards__row {
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

@media (min-width: 768px) {
  .crm-customer-info-cards__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.crm-customer-info-cards__cell {
  min-inline-size: 0;
  padding: 0.875rem;
}

.crm-customer-info-cards__cell + .crm-customer-info-cards__cell {
  border-block-start: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .crm-customer-info-cards__cell + .crm-customer-info-cards__cell {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }
}

.crm-customer-info-cards__label {
  margin: 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 500;
}

.crm-customer-info-cards__value {
  margin-block: 0.25rem 0;
  margin-inline: 0;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 600;
  word-break: break-word;
}

/* Inline badge link in the tabs header right side (open opportunities indicator) */

.crm-customer-opportunities-badge {
  display: inline-flex;
  align-items: center;
}

.crm-customer-opportunities-badge .badge {
  white-space: nowrap;
}

/* Toolbars used inside the customer tabs (invoices/assignments): action buttons and filter rows */

.crm-customer-tab__toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-block-end: 1rem;
}

.crm-customer-tab__toolbar--split {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.crm-customer-tab__table {
  margin-block-start: 1.5rem;
  overflow-x: auto;
}

/* Customer invoices tab */

.crm-customer-invoices {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

.crm-customer-invoices__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--color-border);
}

.crm-customer-invoices__heading {
  min-inline-size: 0;
}

.crm-customer-invoices__eyebrow {
  margin: 0 0 0.25rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
  font-weight: 500;
}

.crm-customer-invoices__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.crm-customer-invoice-summary {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .crm-customer-invoice-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .crm-customer-invoice-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.crm-customer-invoice-summary__item {
  min-inline-size: 0;
  padding: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.crm-customer-invoice-summary__item--balance {
  border-color: color-mix(in oklch, var(--color-info) 28%, var(--color-border));
  background: color-mix(in oklch, var(--color-info) 7%, var(--color-surface));
}

.crm-customer-invoice-summary__label {
  display: block;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 500;
}

.crm-customer-invoice-summary__value {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.crm-customer-invoices__results {
  box-shadow: none;
}

.crm-customer-invoices__empty {
  margin-block-start: 0.25rem;
}

@media (max-width: 639px) {
  .crm-customer-invoices__header {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-customer-invoices__header .btn {
    justify-content: center;
  }
}

/* Status pill filters (assignments tab) */

.crm-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crm-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: var(--color-surface-muted, #f3f4f6);
  color: var(--color-ink-muted, #4b5563);
  font-size: var(--text-small, 0.75rem);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.crm-status-pill:hover {
  background: var(--color-surface-hover, #e5e7eb);
}

.crm-status-pill--active {
  background: var(--color-brand, #4f46e5);
  color: var(--color-on-brand, #ffffff);
}

.crm-status-pill--active:hover {
  background: var(--color-brand-strong, #4338ca);
  color: var(--color-on-brand, #ffffff);
}

/* Opportunities tab (customer record) */

.crm-customer-opportunities {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
  padding: 1rem;
}

.crm-customer-opportunities__header {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--color-brand) 7%, transparent), transparent 46%),
    var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.crm-customer-opportunities > * {
  min-inline-size: 0;
}

@media (min-width: 768px) {
  .crm-customer-opportunities__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.crm-customer-opportunities__heading {
  display: grid;
  gap: 0.375rem;
  min-inline-size: 0;
}

.crm-customer-opportunities__eyebrow {
  margin: 0;
  color: var(--color-brand-strong);
  font-size: var(--text-x-small);
  font-weight: 700;
  text-transform: uppercase;
}

.crm-customer-opportunities__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 750;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.crm-customer-opportunities__intro {
  max-inline-size: 68ch;
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.5;
}

.crm-customer-opportunities__detail {
  min-inline-size: 0;
  margin-block-start: 1.5rem;
}

.crm-customer-opportunities__detail--single {
  margin-block-start: 0;
}

.crm-customer-opportunities__detail :where(
  .comments-panel,
  .comments-panel__title,
  .comments-panel__list,
  .comment-form,
  .comment-form__form,
  .comment-form__fieldset,
  .pickerContainer,
  trix-toolbar,
  trix-editor
) {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.crm-customer-tab__toolbar--opportunities {
  align-items: flex-end;
  margin-block-end: 0;
}

.crm-customer-opportunities-summary {
  display: grid;
  gap: 0.75rem;
  min-inline-size: 0;
}

@media (min-width: 640px) {
  .crm-customer-opportunities-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .crm-customer-opportunities-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.crm-customer-opportunities-summary__item {
  min-inline-size: 0;
  padding: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-surface-muted) 70%, var(--color-surface));
}

.crm-customer-opportunities-summary__item--value {
  border-color: color-mix(in oklch, var(--color-brand) 24%, var(--color-border));
  background: color-mix(in oklch, var(--color-brand) 6%, var(--color-surface));
}

.crm-customer-opportunities-summary__label {
  display: block;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
}

.crm-customer-opportunities-summary__value {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 750;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.crm-opportunity-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  min-inline-size: 0;
}

@media (min-width: 640px) {
  .crm-opportunity-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .crm-opportunity-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.crm-opportunity-cards__card {
  position: relative;
  display: grid;
  gap: 0.75rem;
  min-block-size: 12rem;
  overflow: hidden;
  padding: 0.875rem;
  padding-block-start: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.crm-opportunity-cards__card::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 0.1875rem;
  background: var(--opportunity-stage-color, var(--color-border-strong));
  content: "";
  opacity: 0.86;
}

.crm-opportunity-cards__card:hover {
  border-color: color-mix(in oklch, var(--opportunity-stage-color) 28%, var(--color-border-strong));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.crm-opportunity-cards__card--selected {
  border-color: color-mix(in oklch, var(--opportunity-stage-color) 45%, var(--color-brand));
  box-shadow:
    var(--shadow-surface-outline),
    0 0 0 2px color-mix(in oklch, var(--opportunity-stage-color) 38%, var(--color-brand));
}

.crm-opportunity-cards__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.crm-opportunity-cards__stage {
  max-inline-size: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-opportunity-cards__rotting-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgb(var(--palette-red-100));
  color: var(--color-danger-strong);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

.crm-opportunity-cards__rotting-badge .icon,
.crm-opportunity-cards__date .icon {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.crm-opportunity-cards__title {
  color: var(--color-brand-strong);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.crm-opportunity-cards__facts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface-muted) 70%, var(--color-surface));
}

.crm-opportunity-cards__amount {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.crm-opportunity-cards__date {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-xx-small);
  font-weight: 700;
}

.crm-opportunity-cards__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block-start: 0.625rem;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
}

.crm-opportunity-cards__owner {
  display: inline-flex;
  min-inline-size: 0;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
}

.crm-opportunity-cards__owner > span {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-opportunity-cards__probability {
  flex: 0 0 auto;
  color: var(--color-ink-light);
  font-weight: 700;
}

.crm-opportunity-history[open] {
  display: grid;
  gap: 0.875rem;
}

.crm-opportunity-history__summary {
  cursor: pointer;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 700;
}

.crm-opportunity-history__list {
  min-inline-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.crm-opportunity-history__item {
  min-inline-size: 0;
  border-block-start: 1px solid var(--color-border);
}

.crm-opportunity-history__item:first-child {
  border-block-start: none;
}

.crm-opportunity-history__link {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease;
}

.crm-opportunity-history__link:hover {
  background: var(--color-surface-muted);
}

.crm-opportunity-history__name {
  min-inline-size: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-opportunity-history__meta {
  display: inline-flex;
  min-inline-size: 0;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
}

.crm-opportunity-history__amount {
  font-weight: 600;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .crm-customer-opportunities {
    padding: 0.75rem;
  }

  .crm-customer-opportunities__header {
    padding: 1rem;
  }

  .crm-customer-tab__toolbar--opportunities .btn {
    justify-content: center;
    inline-size: 100%;
  }

  .crm-opportunity-history__link {
    align-items: flex-start;
    flex-direction: column;
  }

  .crm-opportunity-history__meta {
    justify-content: flex-start;
  }

  .crm-opportunity-history__name {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* Customers index — directory overview, filters, and results */

.customer-directory {
  display: grid;
  gap: 1.25rem;
  min-inline-size: 0;
}

.customer-directory__overview {
  display: grid;
  gap: 1.25rem;
  min-inline-size: 0;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--color-brand) 4%, var(--color-surface));
  box-shadow: var(--shadow-sm);
}

@media (min-width: 960px) {
  .customer-directory__overview {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.78fr);
    align-items: end;
    padding: 1.5rem;
  }
}

.customer-directory__heading,
.customer-directory-section-heading {
  display: grid;
  gap: 0.375rem;
  min-inline-size: 0;
}

.customer-directory__eyebrow {
  margin: 0;
  color: var(--color-brand-strong);
  font-size: var(--text-x-small);
  font-weight: 700;
  text-transform: uppercase;
}

.customer-directory__title,
.customer-directory-section-heading__title {
  margin: 0;
  color: var(--color-ink);
  letter-spacing: 0;
}

.customer-directory__title {
  font-size: var(--text-x-large);
  font-weight: 750;
  line-height: 1.15;
}

.customer-directory__intro,
.customer-directory-section-heading__body {
  max-inline-size: 68ch;
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.5;
}

.customer-directory-summary {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-inline-size: 0;
  margin: 0;
}

@media (min-width: 640px) {
  .customer-directory-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.customer-directory-summary__item {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
  min-block-size: 4.5rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--color-surface) 88%, var(--color-surface-muted));
}

.customer-directory-summary__item--primary {
  border-color: color-mix(in oklch, var(--color-brand) 22%, var(--color-border));
  background: color-mix(in oklch, var(--color-brand) 7%, var(--color-surface));
}

.customer-directory-summary__label,
.customer-directory-row__meta,
.customer-directory-row__empty {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
}

.customer-directory-summary__value {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 750;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.customer-directory-summary__label {
  margin: 0;
}

.customer-directory__filters,
.customer-directory__results-section {
  display: grid;
  gap: 0.875rem;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.customer-directory__filters .page-box,
.customer-directory__results .page-box {
  max-inline-size: 100%;
  min-inline-size: 0;
  margin-block-end: 0;
}

.customer-directory__filters .page-box__body {
  padding: 1rem;
}

.customer-directory__results .page-box__body {
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-x: auto;
  padding: 0;
}

.customer-directory__results-header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.customer-directory__meta {
  flex: 0 1 auto;
  min-inline-size: min(100%, 18rem);
}

.customer-directory__results {
  max-inline-size: 100%;
  min-inline-size: 0;
}

.customer-directory-table__caption {
  margin: 0;
  padding: 0.875rem 1rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
  text-align: start;
}

.customer-directory-table__heading--actions {
  inline-size: 1%;
}

.customer-directory-row {
  border-block-start: 1px solid var(--color-border);
}

.customer-directory-row:first-child {
  border-block-start: 0;
}

.customer-directory-row__cell {
  vertical-align: middle;
}

.customer-directory-row__cell--identity {
  min-inline-size: 14rem;
}

.customer-directory-row__cell--actions {
  inline-size: 1%;
}

.customer-directory-row__identity {
  display: grid;
  gap: 0.25rem;
  min-inline-size: 0;
}

.customer-directory-row__name,
.customer-directory-row__email {
  color: var(--color-brand-strong);
  font-weight: 700;
  text-decoration: none;
}

.customer-directory-row__name:hover,
.customer-directory-row__name:focus-visible,
.customer-directory-row__email:hover,
.customer-directory-row__email:focus-visible {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.customer-directory-row__text,
.customer-directory-row__email {
  display: inline-block;
  max-inline-size: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.customer-directory-row__text {
  color: var(--color-ink);
}

.crm-customer-row__opps-count {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid color-mix(in oklch, var(--color-brand) 18%, var(--color-border));
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-brand) 7%, var(--color-surface));
  color: var(--color-ink);
  font-size: var(--text-x-small);
  font-weight: 750;
  line-height: 1.2;
}

.crm-customer-row__opps-label {
  color: var(--color-ink-light);
  font-weight: 650;
}

.crm-customer-row__opps-empty {
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
}

.customer-directory-empty {
  display: grid;
  place-items: center;
  min-block-size: 16rem;
  padding: 1.5rem;
  border: 1px dashed var(--color-border-medium);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

.customer-directory-empty__content {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  max-inline-size: 34rem;
  text-align: center;
}

.customer-directory-empty__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
}

.customer-directory-empty__body {
  margin: 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.5;
}

.customer-directory-empty__actions {
  margin-block-start: 0.25rem;
}

@media (max-width: 639px) {
  .customer-directory__overview {
    padding: 1rem;
  }

  .customer-directory-summary {
    grid-template-columns: 1fr;
  }

.customer-directory__results-header {
    align-items: stretch;
    flex-direction: column;
  }

  .customer-directory__meta {
    inline-size: 100%;
  }
}

/* Customers index — checkbox option (filter for has_open_opportunities) */
.crm-company-filter__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-ink, #1f2937);
}

/* Customers index — stage pills row */
.crm-stage-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
}

.crm-stage-pills__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-block: 0.25rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-pill, 9999px);
  background-color: var(--color-surface-muted, #f3f4f6);
  color: var(--color-ink, #1f2937);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.crm-stage-pills__pill:hover {
  background-color: var(--color-surface-subtle, #e5e7eb);
}

.crm-stage-pills__pill--active {
  box-shadow: 0 0 0 2px var(--color-brand, #6366f1);
}

.crm-stage-pills__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.25rem;
  padding-block: 0.0625rem;
  padding-inline: 0.375rem;
  border-radius: var(--radius-pill, 9999px);
  background-color: rgb(255 255 255 / 0.55);
  font-size: 0.6875rem;
  font-weight: 600;
  color: inherit;
}

/* Coloured pill backgrounds — one per palette colour exposed by the colour picker */
.crm-stage-pills__pill--coloured { color: var(--color-ink, #1f2937); }
.crm-stage-pills__pill--slate    { background-color: var(--color-surface-muted, #f1f5f9); }
.crm-stage-pills__pill--red      { background-color: rgb(var(--palette-red-100)); }
.crm-stage-pills__pill--orange   { background-color: rgb(var(--palette-orange-100)); }
.crm-stage-pills__pill--amber    { background-color: rgb(var(--palette-amber-100)); }
.crm-stage-pills__pill--yellow   { background-color: rgb(var(--palette-yellow-100)); }
.crm-stage-pills__pill--lime     { background-color: rgb(var(--palette-lime-100)); }
.crm-stage-pills__pill--green    { background-color: rgb(var(--palette-green-100)); }
.crm-stage-pills__pill--emerald  { background-color: rgb(var(--palette-emerald-100)); }
.crm-stage-pills__pill--teal     { background-color: rgb(var(--palette-teal-100)); }
.crm-stage-pills__pill--cyan     { background-color: rgb(var(--palette-cyan-100)); }
.crm-stage-pills__pill--sky      { background-color: rgb(var(--palette-sky-100)); }
.crm-stage-pills__pill--blue     { background-color: rgb(var(--palette-blue-100)); }
.crm-stage-pills__pill--indigo   { background-color: rgb(var(--palette-indigo-100)); }
.crm-stage-pills__pill--violet   { background-color: rgb(var(--palette-violet-100)); }
.crm-stage-pills__pill--purple   { background-color: rgb(var(--palette-purple-100)); }
.crm-stage-pills__pill--fuchsia  { background-color: rgb(var(--palette-fuchsia-100)); }
.crm-stage-pills__pill--pink     { background-color: rgb(var(--palette-pink-100)); }
.crm-stage-pills__pill--rose     { background-color: rgb(var(--palette-rose-100)); }

/* Customer contacts tab (nested) — section titles, form padding, edit layout, show extras */

.crm-customer-contacts {
  display: grid;
  gap: 1rem;
  min-inline-size: 0;
}

.crm-customer-contacts__header {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.crm-customer-contacts__heading {
  min-inline-size: 0;
}

.crm-customer-contacts__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.crm-customer-contacts__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.crm-customer-contacts__intro,
.crm-customer-contacts__directory-help,
.crm-customer-contacts-empty__body {
  max-inline-size: 68ch;
  margin: 0.45rem 0 0;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.45;
}

.crm-customer-contacts__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.crm-customer-contacts__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.2;
}

.crm-customer-contacts__summary-value {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
}

.crm-customer-contacts__directory {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.crm-customer-contacts__directory-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-block-end: 1px solid var(--color-border);
}

.crm-customer-contacts__directory-title,
.crm-customer-contacts-empty__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.2;
}

.crm-customer-contacts__table {
  margin-block-start: 0;
}

.crm-customer-contacts__directory .simple-table {
  inline-size: 100%;
  min-inline-size: 42rem;
}

.crm-customer-contact-row .td {
  vertical-align: middle;
}

.crm-customer-contact-row__primary {
  min-inline-size: 12rem;
}

.crm-customer-contact-row__name,
.crm-customer-contact-row__link {
  color: var(--color-primary);
  font-weight: 650;
  text-decoration: none;
}

.crm-customer-contact-row__name:hover,
.crm-customer-contact-row__link:hover {
  text-decoration: underline;
}

.crm-customer-contact-row__muted {
  color: var(--color-ink-muted);
  font-size: var(--text-small);
}

.crm-customer-contact-row__actions {
  white-space: nowrap;
}

.crm-customer-contacts-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
}

@media (min-width: 768px) {
  .crm-customer-contacts__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .crm-customer-contacts__actions {
    justify-content: flex-end;
  }
}

@media (max-width: 767px) {
  .crm-customer-contacts__summary,
  .crm-customer-contacts__actions .btn {
    inline-size: 100%;
    justify-content: center;
  }

  .crm-customer-contacts__directory .simple-table {
    min-inline-size: 0;
  }

  .crm-customer-contacts-empty {
    align-items: stretch;
    flex-direction: column;
  }
}

.crm-customer-tab__toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.crm-contact-section__title {
  margin-block: 0 1rem;
  font-size: var(--text-large, 1.125rem);
  font-weight: 500;
  color: var(--color-ink, #1f2937);
}

.crm-contact-form {
  padding-block: 1rem;
  padding-inline: 1.5rem;
}

.crm-contact-edit {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .crm-contact-edit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.crm-contact-edit__side,
.crm-contact-edit__main {
  min-inline-size: 0;
}

.crm-customer-info-cards__sub {
  margin-block-start: 0.25rem;
  color: var(--color-ink-muted, #6b7280);
  font-size: var(--text-small, 0.875rem);
  font-weight: 400;
}

.crm-contact-show__assignments {
  margin-block-start: 2rem;
}

.crm-customer-import-layout {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .crm-customer-import-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.crm-customer-import-layout__heading {
  margin-block-end: 0.25rem;
  font-size: 1.125rem;
  font-weight: 500;
}

.crm-customer-import-layout__text {
  margin-block-start: 0.25rem;
  color: var(--color-ink-muted, #6b7280);
  font-size: var(--text-small, 0.875rem);
}

.crm-customer-import-layout__template {
  margin-block-start: 0.5rem;
  color: var(--color-ink-muted, #6b7280);
  font-size: var(--text-small, 0.875rem);
}