/**
 * Lattice Log — Choices.js overrides (extracted from overrides.css, ticket 05).
 * Loaded after choices.min.css. See docs/development/ui-styleguide.md
 */

/* Global portal layer for Choices dropdowns opened inside modal/drawer contexts. */
#ll-choices-portal-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 220;
}

#ll-choices-portal-root .ll-choices-portal-menu {
  position: fixed;
  pointer-events: auto;
  z-index: 221;
}

/*
 * Portaled menus (modal, batch create, …): same height budget as global dropdowns.
 * Outer panel scrolls as one column so nothing below the search strip is clipped.
 */
.choices__list--dropdown.ll-choices-portal-menu {
  position: fixed !important;
  z-index: 230 !important;
  max-height: var(--ll-dropdown-max-height, min(22rem, calc(100vh - 4rem))) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.choices__list--dropdown.ll-choices-portal-menu .choices__list {
  max-height: none !important;
  overflow-y: visible !important;
}

/* Choices.js dropdown inside edit modal must sit above the dialog (z-50) so it is visible and clickable. */
#edit-modal .choices__list--dropdown {
  z-index: 60;
}

/* Batch create: dropdown above adjacent panes (height/scroll from global .choices__list--dropdown rules). */
#batch-create-form .choices__list--dropdown {
  z-index: 50;
}
/* Batch create: search input fills dropdown width (library default can mis-size in narrow panes). */
#batch-create-form .choices__list--dropdown .choices__input {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* ===============================
   Choices.js theme alignment
   =============================== */
.choices__inner {
  min-height: 2rem;
  border: 1px solid rgb(var(--mdc-color-outline));
  border-radius: 0.375rem;
  background-color: var(--surface);
  color: rgb(var(--mdc-color-on-surface));
}
.choices[data-type*="select-one"] .choices__inner {
  padding-bottom: 0.25rem;
}
/* Unfocused/open state: keep border consistent (override library’s .is-open border-radius change if desired) */
.choices.is-open .choices__inner {
  border-color: rgb(var(--mdc-color-outline));
}

/* Filter bar: ensure every Choices dropdown (Category, Crop, etc.) looks identical */
.filter-bar .choices__inner {
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid rgb(var(--mdc-color-outline));
  border-radius: 0.375rem;
  background-color: var(--surface);
  color: rgb(var(--mdc-color-on-surface));
}
@media (min-width: 640px) {
  .filter-bar .choices__inner {
    min-height: 40px;
  }
}
.filter-bar .choices.is-focused .choices__inner {
  border-color: rgb(var(--mdc-color-primary));
  box-shadow: 0 0 0 2px rgb(var(--mdc-color-primary) / 0.25);
}

/* Product form: force Specific color dropdown to open below (override library flip) */
#product-color-child-wrap .choices.is-flipped .choices__list--dropdown,
#product-color-child-wrap .choices.is-flipped .choices__list[aria-expanded] {
  top: 100%;
  bottom: auto;
  margin-top: -1px;
  margin-bottom: 0;
}

/*
 * Scroll the entire menu (search + list + appended rows). Cap to viewport via --ll-dropdown-max-height.
 * Include [aria-expanded] panels (Choices.js multi / alternate markup) so all variants match.
 */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  border-color: rgb(var(--mdc-color-outline));
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px -12px rgb(0 0 0 / 0.25);
  max-height: var(--ll-dropdown-max-height, min(22rem, calc(100vh - 4rem)));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
  max-height: none !important;
  overflow-y: visible !important;
}
.choices.is-focused .choices__inner {
  border-color: rgb(var(--mdc-color-input-border-focus));
  box-shadow: 0 0 0 2px rgb(var(--mdc-focus-ring-input) / var(--mdc-input-focus-ring-opacity));
}
.choices__list--multiple .choices__item {
  border-radius: 0.25rem;
  background: rgb(var(--mdc-color-primary-container) / 0.6);
  color: rgb(var(--mdc-color-on-primary-container));
  border: 0;
}

/* Dark mode: Choices.js trigger (closed state) – force surface/on-surface over library defaults */
html.dark .choices__inner {
  background-color: rgb(var(--mdc-color-surface)) !important; /* reason: beat Choices default white */
  border-color: rgb(var(--mdc-color-outline)) !important;
  color: rgb(var(--mdc-color-on-surface)) !important;
}

/* Dark mode: Choices.js dropdown list and options – force over library white background */
html.dark .choices__list--dropdown,
html.dark .choices__list[aria-expanded] {
  background-color: rgb(var(--mdc-color-surface)) !important;
  border-color: rgb(var(--mdc-color-outline)) !important;
  color: rgb(var(--mdc-color-on-surface)) !important;
}
html.dark .choices__list--dropdown .choices__list,
html.dark .choices__list[aria-expanded] .choices__list {
  background-color: rgb(var(--mdc-color-surface)) !important;
}
html.dark .choices__list--dropdown .choices__item,
html.dark .choices__list[aria-expanded] .choices__item {
  color: rgb(var(--mdc-color-on-surface)) !important;
}
html.dark .choices__list--dropdown .choices__item--selectable.is-highlighted,
html.dark .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: rgb(var(--mdc-color-outline) / 0.25) !important;
  color: rgb(var(--mdc-color-on-surface)) !important;
}
html.dark .choices__input {
  background-color: transparent !important;
  color: rgb(var(--mdc-color-on-surface)) !important;
}
html.dark .choices__input::placeholder {
  color: rgb(var(--mdc-color-on-surface-muted)) !important;
}