.choices{
  border-radius: .5rem;
}

.choices.is-disabled .primary-input {
  background-color: #f9f9f9;
}

.choices__inner{
  background-color: white;
  border: 1px solid #D6D6D8;
  border-radius: .5rem;
}

.choices__list{
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
}

/* Import Permissions */

/* Import permissions multi-selects: prevent 1ch cloned input collapse */
.import-permissions-choices .choices__input.choices__input--cloned {
  width: 15ch !important;
  min-width: 15ch !important;
  border-radius: .5rem !important;
}

.import-permissions-choices .choices__list.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.375rem;
  max-height: 9.5rem;
  overflow-y: auto;
}

.import-permissions-choices .choices__list.choices__list--multiple .choices__item {
  margin: 0 !important;
  padding: 0.25rem 0.625rem !important;
  border: 1px solid #D6D6D8 !important;
  border-radius: 0.5rem !important;
  background-color: #F5F5F6 !important;
  color: #5B5965 !important;
}

.import-permissions-choices .choices__list.choices__list--multiple .choices__button {
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  background-image: url("/assets/x-mark-black-34594855.svg");
  background-size: cover;
}

.import-permissions-choices .choices.is-focused .choices__inner,
.import-permissions-choices .choices.is-open .choices__inner,
.import-permissions-choices .choices__inner:focus-within {
  border-color: #D6D6D8 !important;
  box-shadow: none !important;
}

.import-permissions-choices .choices__input.choices__input--cloned:focus {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
}

/* Import Permissions Accordion — compact variant of the multi-select used in
   the metadata import and smart import modals. Inner wrapper sits at h-10 (40px)
   when empty so it matches the design's text-input look; it grows naturally as
   chips are added. */
.import-permissions-accordion-choices .choices {
  margin-bottom: 0;
}

.import-permissions-accordion-choices .choices__inner {
  min-height: 2.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  background-color: #fff;
}

.import-permissions-accordion-choices .choices__list.choices__list--multiple {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
}

.import-permissions-accordion-choices .choices__list.choices__list--multiple .choices__item {
  margin: 0 !important;
  padding: 0.125rem 0.5rem !important;
  font-size: 0.75rem !important;
  border: 1px solid #D6D6D8 !important;
  border-radius: 0.375rem !important;
  background-color: #F5F5F6 !important;
  color: #5B5965 !important;
}

.import-permissions-accordion-choices .choices__list.choices__list--multiple .choices__button {
  width: 0.875rem;
  height: 0.875rem;
  padding: 0;
  border: none;
  background-image: url("/assets/x-mark-black-34594855.svg");
  background-size: cover;
}

.import-permissions-accordion-choices .choices__input.choices__input--cloned {
  width: auto !important;
  min-width: 8ch !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.875rem;
  background-color: transparent;
}

.import-permissions-accordion-choices .choices__input.choices__input--cloned:focus {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
}

.import-permissions-accordion-choices .choices.is-focused .choices__inner,
.import-permissions-accordion-choices .choices.is-open .choices__inner,
.import-permissions-accordion-choices .choices__inner:focus-within {
  border-color: #176BEA !important;
  box-shadow: 0 0 0 1px rgb(23 107 234 / 0.5) !important;
}

/* Improve inline search input sizing in multi-selects */
/* Smart Filters multi-select layout: chips row then full-width search input below */
div.primary-input.smart-filter-input {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 16px;
  position: relative;
  min-height: 44px; /* match other inputs baseline height */
  height: auto; /* grow with selected options */
}
div.primary-input.smart-filter-input > .choices__list.choices__list--multiple { order: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; width: 100%; }
/* Hide search input by default; show only when dropdown is open */
div.primary-input.smart-filter-input > .choices__input.choices__input--cloned {
  display: none; /* default hidden */
}
div.choices.is-open div.primary-input.smart-filter-input > .choices__input.choices__input--cloned {
  display: block;
}

/* Keep sizing and reset for the search input */
div.primary-input.smart-filter-input > .choices__input.choices__input--cloned {
  order: 2;
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box;
  height: 24px;
  line-height: 24px;
  padding: 0 !important;
  margin: 0 !important; /* no extra spacing */
  border: 0 !important;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* Keep chevron anchored to the right and vertically centered inside the select */
div.primary-input .chevron-container {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Remove Tailwind ring/blue glow on focus for the inline search input */
div.primary-input .choices__input.choices__input--cloned:focus {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
}

/* Ensure Smart Filters multi-select containers can grow and align like inputs */
div.primary-input.smart-filter-input {
  min-height: 44px;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  align-items: flex-start;
  justify-content: flex-start;
}

.tags-container { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
div.primary-input .choices__list.choices__list--multiple.tags-container { max-width: 100%; white-space: normal; overflow: visible; }

.tags-container > div.choices__item {
  padding: 8px 16px !important;
  border: 0 !important;
  border-radius: 100px !important;
  margin: 0 !important;
  font-weight: 500 !important;
  background-color: #EBEAEC !important;
  color: #5B5965 !important;
}

.tags-container > div.choices__item > button {
  border-left: 1px solid #5B5965 !important;
  background-image: url("/assets/x-mark-black-34594855.svg") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

div.primary-input.single-select .choices__item--selectable {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

div.primary-input.single-select .choices__item--selectable:not(.choices__placeholder) {
  width: fit-content;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border-radius: 100px;
  color: #5B5965;
  background-color: #EDECEE;
}

/* Workflow Multiple Signers & Approvers, View Alert Recipients */
#workflow-multiple-signers-select .choices,
#workflow-multiple-signers-select .choices__inner,
#workflow-multiple-approvers-select .choices,
#workflow-multiple-approvers-select .choices__inner,
#signed-agreement-recipients-select .choices,
#signed-agreement-recipients-select .choices__inner,
#view-alert-recipients-select .choices,
#view-alert-recipients-select .choices__inner {
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: #F9F9F9;
  overflow: visible;
}

#workflow-multiple-signers-select.request-signers-select .choices,
#workflow-multiple-signers-select.request-signers-select .choices__inner {
  background-color: white;
}

/* View-alert recipients sits on a white modal, not the gray panel the signer
   variants live in, so the inherited #F9F9F9 fill is overridden here. */
#view-alert-recipients-select .choices,
#view-alert-recipients-select .choices__inner {
  background-color: transparent;
}

/* Same pill-row layout as the signer/approver variants, but the divider
   band (padding + margin + border-bottom) only kicks in once a pill is
   actually present — otherwise the search input floats below an empty band. */
#view-alert-recipients-select .choices__list.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.625em 0.5em;
  border-radius: 0;
}

#view-alert-recipients-select .choices__list.choices__list--multiple:has(.choices__item) {
  padding: 1em 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid #D6D6D8;
}

#workflow-multiple-signers-select .choices__list.choices__list--multiple,
#workflow-multiple-approvers-select .choices__list.choices__list--multiple,
#signed-agreement-recipients-select .choices__list.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.625em 0.5em;
  padding: 1em 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid #D6D6D8;
  border-radius: 0;
}

#workflow-multiple-signers-select .choices__list.choices__list--multiple .choices__item,
#workflow-multiple-approvers-select .choices__list.choices__list--multiple .choices__item,
#signed-agreement-recipients-select .choices__list.choices__list--multiple .choices__item,
#view-alert-recipients-select .choices__list.choices__list--multiple .choices__item,
.multiple-choice .choices__list--multiple .choices__item {
  padding: 0.25em 0.75em;
  border: 1px solid #D6D6D8;
  border-radius: 0.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  background-color: white;
  color: #5B5965;
}

#workflow-multiple-signers-select .choices__button,
#workflow-multiple-approvers-select .choices__button,
#signed-agreement-recipients-select .choices__button,
#view-alert-recipients-select .choices__button {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background-image: url("/assets/x-mark-black-34594855.svg");
  background-size: cover;
}

#workflow-multiple-signers-select .choices__input.choices__input--cloned,
#workflow-multiple-approvers-select .choices__input.choices__input--cloned,
#signed-agreement-recipients-select .choices__input.choices__input--cloned,
#view-alert-recipients-select .choices__input.choices__input--cloned {
  width: 100% !important;
  border: 1px solid #D6D6D8;
  border-radius: 0.625rem;
  margin: 0;
}

#workflow-multiple-signers-select .choices__input.choices__input--cloned:focus,
#workflow-multiple-approvers-select .choices__input.choices__input--cloned:focus,
#signed-agreement-recipients-select .choices__input.choices__input--cloned:focus,
#view-alert-recipients-select .choices__input.choices__input--cloned:focus {
  border: 1px solid #176BEA;
  box-shadow: 0 0 6px 0 rgb(23,107,234);
}

/* The signer/approver hardcoded #D6D6D8 / #176BEA matches the dark-theme
   fallback for --border-color-input, not its default. Use the themed vars
   so the input border tracks the rest of the design system. */
#view-alert-recipients-select .choices__input.choices__input--cloned {
  border-color: var(--border-color-input);
}

#view-alert-recipients-select .choices__input.choices__input--cloned:focus {
  border-color: var(--border-color-input-focus);
}

#workflow-multiple-signers-select .choices__list.choices__list--dropdown,
#workflow-multiple-approvers-select .choices__list.choices__list--dropdown,
#signed-agreement-recipients-select .choices__list.choices__list--dropdown,
#view-alert-recipients-select .choices__list.choices__list--dropdown {
  margin-top: 1rem;
}

#new-routing-rule-signer-select .choices__list.choices__list--dropdown,
#new-routing-rule-approver-select .choices__list.choices__list--dropdown {
  z-index: 20;
}

#signed-agreement-recipients-select .choices__list.choices__list--dropdown,
#workflow-multiple-signers-select .choices__list.choices__list--dropdown,
#workflow-multiple-approvers-select .choices__list.choices__list--dropdown {
  margin-bottom: 1rem;
}

#signed-agreement-recipients-select .choices__inner{
  display: flex;
  flex-direction: column-reverse;
}

#signed-agreement-recipients-select .choices__list--multiple {
  margin-top: 16px;
  border-top: 1px solid #D6D6D8;
  border-bottom: 1px solid #D6D6D8;
}

.multiple-choice .choices__input {
  display: block;
  width: 100% !important;
  border: 1px solid #D6D6D8;
  border-radius: 0.625rem;
}

.multiple-choice .choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem 0;
}

.multiple-choice .choices__button {
  border-left: none !important;
  background-image: url("/assets/x-mark-black-34594855.svg") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.multiple-choice .choices.is-disabled .choices__inner,
.multiple-choice .choices.is-disabled .choices__input,
.multiple-choice .choices.is-disabled .choices__item--selectable,
.multiple-choice .choices.is-disabled .choices__button {
  cursor: not-allowed;
  background-color: #f9f9f9;
}

/* Routing Rule Approvers & Signers multi-selects (edit and new modals) */
#routing-rule-approver-select .choices,
#routing-rule-signer-select .choices,
#new-routing-rule-approver-select .choices,
#new-routing-rule-signer-select .choices {
  overflow: visible;
}

#routing-rule-approver-select .choices__inner,
#routing-rule-signer-select .choices__inner,
#new-routing-rule-approver-select .choices__inner,
#new-routing-rule-signer-select .choices__inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: white;
  overflow: visible;
  min-height: unset;
  outline: none;
}

#routing-rule-approver-select .choices__list.choices__list--multiple,
#routing-rule-signer-select .choices__list.choices__list--multiple,
#new-routing-rule-approver-select .choices__list.choices__list--multiple,
#new-routing-rule-signer-select .choices__list.choices__list--multiple {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 0.375em 0.375em;
  padding: 0;
}

#routing-rule-approver-select .choices__list.choices__list--multiple .choices__item,
#routing-rule-signer-select .choices__list.choices__list--multiple .choices__item,
#new-routing-rule-approver-select .choices__list.choices__list--multiple .choices__item,
#new-routing-rule-signer-select .choices__list.choices__list--multiple .choices__item {
  padding: 0.25em 0.75em;
  border: 1px solid #D6D6D8;
  border-radius: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  background-color: #F5F5F6;
  color: #5B5965;
}

#routing-rule-approver-select .choices__button,
#routing-rule-signer-select .choices__button,
#new-routing-rule-approver-select .choices__button,
#new-routing-rule-signer-select .choices__button {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background-image: url("/assets/x-mark-black-34594855.svg");
  background-size: cover;
}

#routing-rule-approver-select .choices__input.choices__input--cloned,
#routing-rule-signer-select .choices__input.choices__input--cloned,
#new-routing-rule-approver-select .choices__input.choices__input--cloned,
#new-routing-rule-signer-select .choices__input.choices__input--cloned {
  width: 100% !important;
  border: 1px solid #D6D6D8;
  border-radius: 0.5rem;
  margin: 0.5rem 0 0;
}

#routing-rule-approver-select .choices__input.choices__input--cloned:focus,
#routing-rule-signer-select .choices__input.choices__input--cloned:focus,
#new-routing-rule-approver-select .choices__input.choices__input--cloned:focus,
#new-routing-rule-signer-select .choices__input.choices__input--cloned:focus {
  border: 1px solid #176BEA;
  box-shadow: 0 0 6px 0 rgb(23,107,234);
  outline: none;
}

/* TODO: Standardize the use of choices.js */

#group-membership-user-select .choices__list[aria-expanded] .choices__list {
  max-height: 123px;
  overflow-y: auto;
}

/* Routing rule quorum groups: selected participants render as full-width
   stacked rows below the search input. */
.routing-quorum-choices .choices__inner {
  display: flex;
  flex-direction: column;
}

.routing-quorum-choices .choices__input.choices__input--cloned {
  order: -1;
  width: 100% !important;
  min-width: 15ch !important;
  margin-bottom: 0;
  border-radius: .5rem !important;
}

/* Collapse the list while empty so the select keeps standard input height. */
.routing-quorum-choices .choices__list.choices__list--multiple:not(:has(.choices__item)) {
  display: none;
}

.routing-quorum-choices .choices__list.choices__list--multiple {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
  margin-top: 0.375rem;
}

.routing-quorum-choices .choices__list.choices__list--multiple .choices__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 !important;
  padding: 0.5rem 0.75rem !important;
  border: none !important;
  border-radius: 0.5rem !important;
  background-color: #F5F5F6 !important;
  color: #5B5965 !important;
  font-size: 0.875rem;
}

.routing-quorum-choices .choices__list.choices__list--multiple .choices__button {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  padding: 0;
  border: none;
  background-image: url("/assets/x-mark-black-34594855.svg");
  background-size: cover;
}