/*
 * Searchable-select enhancer styles. Paired with searchable_select.js.
 *
 * Goal: look like the native <select> in the surrounding form so we
 * inherit whatever sizing / colours the host page applied — but with
 * a small popup that has a search input + filterable option list.
 */

.ss-wrap {
  position: relative;
  display: inline-block;
  /* JS sets explicit width from the original select's rendered size
     (when not specified by inline style). The trigger button inside
     then fills 100% of the wrap so the visible control matches the
     dimensions the page designer chose for the original <select>.

     In flex containers (journal-filter-row, manage-filter-bar, etc.)
     the wrap becomes a flex item. min-width:0 lets it shrink BELOW
     its content size when the row is crowded — without this, the
     trigger button's intrinsic min size keeps the wrap from
     collapsing, causing siblings to overlap. */
  min-width: 0;
  /* Keep flex-shrink enabled (default) but be explicit so future
     resets don't accidentally pin it to 0. */
  flex-shrink: 1;
}

/* The original <select> is moved inside the wrapper and hidden.
   It still participates in form submit; we update its .value on pick. */
.ss-native {
  display: none !important;
}

/* The trigger button takes on the visual styling that was attached
   to the original <select> via class copying in searchable_select.js
   (eg. .journal-filter-select). Defaults below are a tasteful fallback
   if the host page didn't style its selects at all. */
.ss-trigger {
  background: #fff;
  color: #111827;
  padding: 7px 28px 7px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  /* Fill the wrap so the trigger matches whatever width the host
     page set on the original <select>. min-width: 0 lets the
     trigger shrink with the wrap in tight flex containers; without
     this, the button's text content sets a min size that prevents
     the row from compressing and causes adjacent controls to
     overlap. text-overflow: ellipsis truncates long option labels
     cleanly when the trigger is forced narrow. */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
.ss-trigger::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #9ca3af;
  transform: translateY(-50%);
}
.ss-trigger:hover { background: #f9fafb; }
.ss-trigger:focus {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
.ss-trigger[aria-expanded="true"] {
  background: #f3f4f6;
}

/* Popup panel.

   position: fixed (NOT absolute) so the popup escapes every
   overflow:hidden / overflow:auto ancestor — cards, form sections,
   modals, etc. The JS sets top/left from the trigger's
   getBoundingClientRect() on open (see positionPopup). Earlier
   versions used position:absolute which got clipped by any
   container that didn't accept overflowing content, AND when a
   container DID accept it, the container grew to fit the popup
   and pushed the page layout up.
*/
.ss-popup {
  position: fixed;
  z-index: 1000;
  min-width: 140px;
  max-width: 360px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
}
/* DEFENSIVE: the JS sets popup.hidden = true to close, which relies on
   the UA-default `[hidden] { display: none }`. In Chrome that rule
   carries !important, but Safari and Firefox don't — meaning our
   explicit `.ss-popup { display: flex }` above can WIN over [hidden]
   and leave the popup rendered. Tom hit this on the Clearance page
   (popups auto-expanded and wouldn't close). Force [hidden] to win. */
.ss-popup[hidden] {
  display: none !important;
}

.ss-search {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  outline: none;
  box-sizing: border-box;
}
.ss-search:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ss-options {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  max-height: 260px;
}
.ss-option {
  padding: 6px 10px;
  font-size: 13px;
  color: #1f2937;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-option:hover { background: #f3f4f6; }
.ss-option--highlighted { background: #dbeafe; color: #1e3a8a; }
.ss-option--selected   { font-weight: 600; }
.ss-option--hidden     { display: none; }

/* Empty-state message when filter matches nothing — pure CSS via
   :empty doesn't work for lists with hidden children, so the JS
   doesn't render an empty state today. If we need one, add a
   conditional <li class="ss-empty">No matches</li> in JS. */