/* pf-choices.css — dark theme for Choices.js, matching the PuraFi UI.
   Works on both var namespaces: app/operator.html use --pf-*, index.html uses the
   bare --field/--text/--border-2, so every color uses a fallback chain. */

:root {
  --pfc-bg:     var(--pf-field,    var(--field,    #15181d));
  --pfc-panel:  var(--pf-surface,  var(--surface,  #1b1f26));
  --pfc-border: var(--pf-border-2, var(--border-2, #2a2f37));
  --pfc-text:   var(--pf-text,     var(--text,     #e6e8eb));
  --pfc-muted:  var(--pf-text-muted, var(--pf-text-2, var(--text-2, #8b94a3)));
  --pfc-accent: var(--pf-accent,   var(--accent,   #c9a227));
  --pfc-hover:  rgba(255, 255, 255, .06);
}

/* reset the library's default 24px bottom margin; we control spacing via .form-row */
.choices.pf-choices { margin-bottom: 0; }

/* closed control */
.pf-choices .choices__inner {
  background: var(--pfc-bg);
  border: 1px solid var(--pfc-border);
  color: var(--pfc-text);
  border-radius: 8px;
  min-height: 0;
  padding: 8px 28px 8px 11px;
  font-family: inherit;
  font-size: 13px;
  text-transform: none;       /* .form-row sets uppercase — undo it for the control */
  letter-spacing: 0;
}
.pf-choices.is-focused .choices__inner,
.pf-choices.is-open .choices__inner { border-color: var(--pfc-accent); }
.pf-choices.is-open .choices__inner { border-radius: 8px 8px 0 0; }

.pf-choices .choices__list--single { padding: 0; }
.pf-choices .choices__list--single .choices__item { color: var(--pfc-text); }
.pf-choices .choices__placeholder { color: var(--pfc-muted); opacity: 1; }

/* dropdown arrow */
.pf-choices[data-type*="select-one"]::after {
  border-color: var(--pfc-muted) transparent transparent;
  right: 11px;
}
.pf-choices[data-type*="select-one"].is-open::after { border-color: transparent transparent var(--pfc-muted); }

/* open panel */
.pf-choices .choices__list--dropdown,
.pf-choices .choices__list[aria-expanded] {
  background: var(--pfc-panel);
  border: 1px solid var(--pfc-border);
  border-radius: 0 0 8px 8px;
  color: var(--pfc-text);
  z-index: 40;
}
.pf-choices .choices__list--dropdown .choices__item,
.pf-choices .choices__list[aria-expanded] .choices__item {
  color: var(--pfc-text);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  padding: 9px 11px;
}
.pf-choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.pf-choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: var(--pfc-hover);
}
.pf-choices .choices__list--dropdown .choices__item--selectable.is-selected,
.pf-choices .choices__list[aria-expanded] .choices__item--selectable.is-selected {
  color: var(--pfc-accent);
}

/* search box inside the panel */
.pf-choices .choices__input {
  background: var(--pfc-bg);
  color: var(--pfc-text);
  border: 1px solid var(--pfc-border);
  border-radius: 6px;
  margin: 8px;
  padding: 7px 9px;
  font-size: 13px;
}
.pf-choices .choices__input::placeholder { color: var(--pfc-muted); }

.pf-choices.is-disabled .choices__inner { opacity: .55; }