/* 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-page__header,
.providers-search,
.provider-profile {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.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-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,
.provider-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;
}

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

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

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

.providers-search {
  gap: 1rem;
}

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

.providers-search__title,
.provider-directory__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;
}

.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 {
  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__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__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 {
  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__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__header,
  .providers-search,
  .provider-profile,
  .provider-facts {
    padding: 1.25rem;
  }

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

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

  .providers-page__summary,
  .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::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 {
    overflow: visible;
    text-align: end;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

/* CRM dashboard */

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

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

.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;
}

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

  .opportunity-page-intro__body {
    grid-column: span 2;
  }
}

.opportunity-page-intro__title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 600;
}

.opportunity-page-intro__copy {
  margin-block: 0.5rem 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-small);
}

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

.opportunity-form-grid {
  margin-block-start: 1rem;
  gap: 1rem 1.5rem;
}

.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(2, minmax(0, 1fr));
  }
}

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

.opportunity-filter-extra {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 1rem;
}

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

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

.opportunity-form-actions {
  align-items: center;
  justify-content: space-between;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--color-border);
}

.opportunity-lines-card {
  overflow: hidden;
  margin-block: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.opportunity-lines-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-block-end: 1px solid var(--color-border);
  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: 1.5rem 1rem;
}

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

.opportunity-line-form__body {
  display: flex;
  align-items: center;
}

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

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

  .opportunity-line-form__quantity,
  .opportunity-line-form__price {
    inline-size: 7rem;
  }

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

.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;
  display: none;
  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:not([hidden]) {
  display: block;
}

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

.opportunity-line-form__remove {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  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-detail {
  display: grid;
  gap: 1.5rem;
}

.opportunity-detail__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .opportunity-detail__header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.opportunity-detail__title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.25rem;
}

.opportunity-detail__title {
  font-size: var(--text-x-large);
}

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

.opportunity-detail__layout {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .opportunity-detail__layout {
    grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
  }
}

.opportunity-detail__main {
  display: grid;
  gap: 1.5rem;
}

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

.opportunity-stat-grid {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.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 {
  padding: 1.25rem 1rem;
}

.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-brand-strong);
  font-size: var(--text-normal);
  font-weight: 400;
  text-transform: none;
}

.opportunity-stat__value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: 0.25rem;
  font-size: var(--text-large);
  font-weight: 600;
}

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

.opportunity-detail-note {
  margin-block-start: 1rem;
  padding: 1.25rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.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;
}

.opportunity-kanban__column-frame {
  flex: 0 0 calc((100% - 3rem) / 4);
  min-inline-size: 18rem;
}

.opportunity-kanban__loading {
  padding: 0.75rem;
  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-column {
  min-block-size: 12.5rem;
  padding: 0.75rem;
}

.opportunity-kanban-column__title {
  margin: 0;
  padding: 1.25rem 1rem;
  font-size: var(--text-large);
  font-weight: 700;
}

.opportunity-kanban-column__cards {
  display: grid;
  gap: 0.5rem;
  min-block-size: 3.75rem;
}

.opportunity-kanban-column__more {
  margin-block-start: 0.5rem;
  text-align: center;
}

.opportunity-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 150ms ease;
}

.opportunity-card:hover {
  box-shadow: var(--shadow-md);
}

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

.opportunity-card__stripe {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.25rem;
}

.opportunity-card__body {
  padding: 0.75rem;
  padding-inline-start: 1rem;
}

.opportunity-card__header,
.opportunity-card__footer,
.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__title {
  min-inline-size: 0;
  flex: 1;
  overflow: hidden;
  color: var(--color-ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-card__title:hover {
  color: var(--color-brand-strong);
}

.opportunity-card__customer {
  overflow: hidden;
  margin-block: 0.125rem 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.opportunity-card__amount,
.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;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}

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

.opportunity-stage-path {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding-block: 0.75rem;
}

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

.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: 2.25rem;
  block-size: 2.25rem;
  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.5rem color-mix(in srgb, var(--color-brand) 40%, 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,
    box-shadow 150ms ease;
}

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

.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-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.75rem;
}

.opportunity-timeline__entry {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-muted);
  color: var(--color-ink-light);
}

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

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

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

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

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

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

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

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

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

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

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

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

.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;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-small);
}

.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 customer activity timeline (combined stage changes + comments + creation) */

.crm-activity-timeline {
  margin-block-start: 2rem;
}

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

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

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

.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-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-x-small);
  font-style: italic;
}

.crm-activity-timeline__meta {
  margin: 0.25rem 0 0;
  color: var(--color-ink-lighter);
  font-size: var(--text-x-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: rgb(var(--palette-red-50));
}

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

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

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

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

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

.crm-activity-timeline__entry--indigo,
.crm-activity-timeline__entry--violet {
  border-color: rgb(var(--palette-violet-200));
  background: rgb(var(--palette-violet-50));
}

.crm-activity-timeline__entry--purple,
.crm-activity-timeline__entry--fuchsia {
  border-color: rgb(var(--palette-purple-200));
  background: rgb(var(--palette-purple-50));
}

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

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

.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: var(--color-surface-muted);
}

/* CRM customer detail (show page 3+1 column layout: info/stage/comments on left, timeline on right) */

.crm-customer-detail {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .crm-customer-detail {
    grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
  }
}

.crm-customer-detail__main {
  display: grid;
  gap: 1.5rem;
  min-inline-size: 0;
}

.crm-customer-detail__side {
  min-inline-size: 0;
}

/* CRM customer info cards (basic customer data shown as labelled cells in rows) */

.crm-customer-info-cards {
  display: grid;
  gap: 1rem;
}

.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);
  box-shadow: var(--shadow-panel);
}

@media (min-width: 768px) {
  .crm-customer-info-cards__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.crm-customer-info-cards__cell {
  padding: 1.25rem 1rem;
}

.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-brand-strong);
  font-size: var(--text-normal);
  font-weight: 400;
}

.crm-customer-info-cards__value {
  margin-block: 0.25rem 0;
  margin-inline: 0;
  color: var(--color-ink);
  font-size: var(--text-large);
  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;
}

/* 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__detail {
  margin-block-start: 1.5rem;
}

.crm-opportunity-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@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 {
  display: block;
  padding: 0.75rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 0.5rem;
  background: var(--color-surface, #ffffff);
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.crm-opportunity-cards__card:hover {
  background: var(--color-surface-muted, #f9fafb);
}

.crm-opportunity-cards__card--selected {
  box-shadow: 0 0 0 2px var(--color-brand, #4f46e5);
  border-color: transparent;
}

.crm-opportunity-cards__card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.crm-opportunity-cards__rotting-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: auto;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: var(--color-rose-50, #fee2e2);
  color: var(--color-rose-700, #b91c1c);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
}

.crm-opportunity-cards__title {
  margin-block-start: 0.5rem;
  font-weight: 600;
  color: var(--color-ink, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-opportunity-cards__meta {
  display: flex;
  justify-content: space-between;
  margin-block-start: 0.25rem;
  font-size: var(--text-small, 0.75rem);
  color: var(--color-ink-muted, #6b7280);
}

.crm-opportunity-history {
  /* details container */
}

.crm-opportunity-history__summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink-muted, #475569);
}

.crm-opportunity-history__list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.crm-opportunity-history__item {
  border-block-start: 1px solid var(--color-border, #e5e7eb);
}

.crm-opportunity-history__item:first-child {
  border-block-start: none;
}

.crm-opportunity-history__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 120ms ease;
}

.crm-opportunity-history__link:hover {
  background: var(--color-surface-muted, #f9fafb);
}

.crm-opportunity-history__name {
  font-weight: 500;
  color: var(--color-ink, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-opportunity-history__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-small, 0.75rem);
  color: var(--color-ink-muted, #6b7280);
}

.crm-opportunity-history__amount {
  font-weight: 600;
  color: var(--color-ink, #334155);
}

/* 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 row — Open opps cell */
.crm-customer-row__opps-count {
  font-weight: 500;
  color: var(--color-ink, #1f2937);
}

.crm-customer-row__opps-empty {
  color: var(--color-ink-muted, #6b7280);
}

/* Customer contacts tab (nested) — section titles, form padding, edit layout, show extras */

.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);
}