/* Ponte entre as CSS vars do Choices.js e os tokens do SiteConfig (--color-*)
   injetados em templates/base.html — mesmo princípio do tema do AG Grid
   em static/js/cases-demo.js::buildDemoGridTheme(). Nunca hex hardcoded
   fora daqui; tudo referencia var(--color-*) ou tom dark-first do site. */
:root {
  --choices-primary-color: var(--color-primary);
  --choices-bg-color: #1e293b;
  --choices-bg-color-dropdown: #1e293b;
  --choices-text-color: #e2e8f0;
  --choices-keyline-color: rgba(255, 255, 255, 0.1);
  --choices-bg-color-disabled: #0f172a;
  --choices-item-disabled-color: #64748b;
  --choices-disabled-color: #334155;
  --choices-highlighted-color: rgba(93, 224, 230, 0.15);
  --choices-border-radius: 0.5rem;
  --choices-border-radius-item: 9999px;
}

.choices__inner {
  padding: 0.5rem 0.75rem;
  min-height: 0;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  border-color: var(--choices-keyline-color);
}

/* AG Grid cria stacking context próprio nos headers/células — sem isso o
   dropdown aberto do Choices some atrás da grid quando os dois convivem
   na mesma tela (ex.: select "Índice" acima da tabela de reajuste). */
.choices.is-open {
  position: relative;
  z-index: 30;
}
.choices__list--dropdown {
  z-index: 30;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--choices-highlighted-color);
  color: #fff;
}

.choices[data-type*="select-one"] .choices__input {
  background-color: var(--choices-bg-color);
  color: var(--choices-text-color);
}

/* Variante compacta — selects dentro de card pequeno (kanban) */
.choices--small {
  margin-bottom: 0;
  font-size: 0.75rem;
}
.choices--small .choices__inner {
  min-height: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}
.choices--small .choices__list--single {
  padding: 0;
}