/* ============================================================
   Choices.js Brand Overrides — Black Ink
   Styles the multi-select library to match the brand:
   black tags, clean dropdown, professional focus states
   ============================================================ */

/* --- Container --- */
.choices {
  margin-bottom: 0;
  font-family: var(--font-family);
}

.choices__inner {
  background-color: var(--color-off-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 8px 12px;
  min-height: 46px;
  font-size: var(--font-size-body);
  line-height: 1.4;
}

.choices__inner:hover {
  border-color: #999999;
}

/* --- Focus State --- */
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--color-border-focus);
  border-width: 2px;
  padding: 7px 11px;
  box-shadow: 0 0 0 1px var(--color-border-focus);
}

/* --- Selected Items (Black Tags) --- */
.choices__list--multiple .choices__item {
  background-color: var(--color-black);
  border: 1px solid var(--color-black);
  color: var(--color-white);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  padding: 4px 10px;
  margin: 2px;
  word-break: break-word;
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}

/* Remove button (X) */
.choices__list--multiple .choices__item .choices__button {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 8px;
  margin-left: 6px;
  opacity: 0.7;
}

.choices__list--multiple .choices__item .choices__button:hover {
  opacity: 1;
}

/* --- Search Input --- */
.choices__input {
  background-color: transparent;
  font-size: var(--font-size-body);
  color: var(--color-gray-medium);
  font-family: var(--font-family);
  padding: 2px 0;
  margin-bottom: 0;
}

.choices__input::placeholder {
  color: #999999;
}

/* --- Dropdown List --- */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-elevated);
  z-index: 100;
  background-color: var(--color-white);
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  font-size: var(--font-size-body);
  padding: 10px 16px;
  color: var(--color-gray-medium);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--color-gray-light);
  color: var(--color-black);
}

/* No results */
.choices__list--dropdown .choices__item--choice.has-no-results {
  color: var(--color-gray-warm);
  font-style: italic;
}

/* --- Placeholder --- */
.choices__placeholder {
  color: #999999;
  opacity: 1;
}

/* --- Validation Error State --- */
.form-group--error .choices__inner {
  border-color: var(--color-gray-medium);
  border-width: 2px;
  padding: 7px 11px;
}

/* --- Mobile Adjustments --- */
@media (max-width: 767px) {
  .choices__inner {
    min-height: 44px;
  }

  .choices__list--multiple .choices__item {
    font-size: var(--font-size-xs);
    padding: 3px 8px;
  }

  .choices__list--dropdown .choices__item,
  .choices__list[aria-expanded] .choices__item {
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}