/* hw-combo — searchable dropdown styling.
 *
 * Goal: indistinguishable from a Bootstrap .form-select until you start typing.
 * Anything that looks like a different widget makes the app feel inconsistent,
 * and these replace ~300 native selects across every screen.
 */

.hw-combo { position: relative; display: block; }

/* The native select stays in the DOM (it is still the form value) and stays
   RENDERED rather than display:none — a display:none control cannot be focused,
   and browsers silently refuse to report validation on an unfocusable field,
   which would break `required` on every form using one. */
.hw-combo-native {
  position: absolute;
  left: 0; bottom: 0;
  width: 1px; height: 1px;
  opacity: 0;
  padding: 0; margin: 0; border: 0;
  pointer-events: none;
  appearance: none;
}

.hw-combo-input {
  /* Bootstrap draws the caret as a background image; ours is a real element so
     it can sit next to a clear button. */
  background-image: none !important;
  padding-right: 3.6rem;
  cursor: pointer;
  text-overflow: ellipsis;
}
.hw-combo-input:focus { cursor: text; }
.hw-combo-input.hw-combo-placeholder::placeholder { color: var(--bs-body-color); opacity: 1; }
.hw-combo-input::placeholder { color: var(--bs-secondary-color); opacity: 1; }
.hw-combo-input:disabled { cursor: not-allowed; }

.hw-combo-caret {
  position: absolute;
  right: .55rem; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center;
  color: var(--bs-secondary-color);
  font-size: .75rem;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .12s;
}
.hw-combo-open .hw-combo-caret { transform: translateY(-50%) rotate(180deg); }
.hw-combo-input:disabled ~ .hw-combo-caret { opacity: .4; cursor: not-allowed; }

.hw-combo-clear {
  position: absolute;
  right: 1.75rem; top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  font-size: .7rem; line-height: 1;
}
.hw-combo-clear.hw-combo-clear-on { display: flex; }
.hw-combo-clear:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }

/* ─── Menu ───────────────────────────────────────────────────────────────────
   Appended to <body> with position:fixed. Nesting it next to the input means
   fighting overflow:hidden on cards, tables and modals forever. */
.hw-combo-menu {
  position: fixed;
  z-index: 1090;              /* above Bootstrap's modal (1055) */
  display: none;
  min-width: 12rem;
  max-width: min(30rem, 92vw);
  overflow-y: auto;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  box-shadow: 0 .5rem 1.5rem rgba(11, 28, 51, .18);
  padding: .25rem;
}
.hw-combo-menu-open { display: block; }

.hw-combo-option {
  display: flex; align-items: center; gap: .4rem;
  padding: .34rem .5rem;
  border-radius: .25rem;
  font-size: .875rem;
  line-height: 1.35;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
}
.hw-combo-option:hover { background: var(--bs-tertiary-bg); }
.hw-combo-active { background: rgba(0, 136, 206, .12); }
.hw-combo-selected { font-weight: 600; }
.hw-combo-tick { margin-left: auto; color: #0088CE; flex: none; }

/* One flex item for the whole label. Without this wrapper the row's `gap`
   applies between the text nodes and the <mark>, splitting the matched
   character out of its own word. */
.hw-combo-label { flex: 1 1 auto; min-width: 0; }

.hw-combo-option mark {
  background: rgba(240, 179, 16, .38);   /* brand gold, used only as a find-hit
                                            marker — not an accent here */
  color: inherit;
  padding: 0;
  margin: 0;
  border-radius: 2px;
  /* Never let the highlight change the text's metrics: the word must read
     identically highlighted or not. */
  font: inherit;
  line-height: inherit;
}

.hw-combo-implicit-submit {
  /* Restores Enter-to-submit on filter bars that have no submit button; see
     preserveImplicitSubmit in hw_combo.js. Must stay in the layout (not
     display:none) to remain the form's default button. */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.hw-combo-group {
  padding: .4rem .5rem .2rem;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--bs-secondary-color);
}
.hw-combo-empty {
  padding: .6rem .5rem;
  font-size: .82rem;
  color: var(--bs-secondary-color);
  text-align: center;
}

/* Opt-in "create new" footer (data-combo-create). Sticks to the bottom of the
   menu so it stays reachable in a long list, and sits on the body background so
   a scrolled option never shows through it. */
.hw-combo-create {
  position: sticky;
  bottom: 0;
  padding: .5rem .6rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--bs-primary);
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
  cursor: pointer;
  user-select: none;
}
.hw-combo-create:hover {
  background: var(--bs-primary);
  /* Not #fff. This paints a `--color-primary` background, so it owes the
     matching on-color — base.html derives that from the brand's luma, and the
     Hiperwall accent is gold, where white is unreadable. The house rule in
     CLAUDE.md, in the one place that was still hardcoding it. */
  color: var(--color-on-primary);
}

/* ─── Layout hosts ───────────────────────────────────────────────────────────
   The wrapper becomes the element the surrounding layout sees, so anything
   Bootstrap styles via direct-child selectors has to be re-applied to it. */

/* Inline filter bars: the select carried its own width and expects to sit next
   to its neighbours rather than claim the row. */
.hw-combo-inline { display: inline-block; vertical-align: middle; max-width: 100%; }
.hw-combo-input[style*="width:auto"],
.hw-combo-input[style*="width: auto"] { min-width: 9rem; }

/* Input groups (the report builder's field/operator/value row). Bootstrap sizes
   and squares off its *direct* children; after wrapping, that is us. */
.input-group > .hw-combo {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .hw-combo > .hw-combo-input { width: 100%; }
.input-group > .hw-combo:not(:last-child) > .hw-combo-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .hw-combo:not(:first-child) > .hw-combo-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

@media (prefers-reduced-motion: reduce) {
  .hw-combo-caret { transition: none; }
}