/* ==========================================================================
   Record search — a control strip that finds one record in a set too big to
   render, and a popover of results to attach it from.

   Markup: app/views/shared/_record_search.html.erb
           app/views/shared/_record_search_results.html.erb
   Behavior: app/javascript/controllers/record_search_controller.js

   The counterpart to collection-picker.css. That control shows every option
   and filters in the browser; this one shows nothing until someone types. Use
   it wherever the candidate set grows without a ceiling — students, documents
   — and the picker wherever it doesn't.

   The strip sits inside a .list-panel, between the panel header and its rows,
   so its side padding matches .line-item's 1.5rem and every control's left
   edge lines up with the names below it.

   LOAD ORDER — `stylesheet_link_tag :app` sorts logical paths alphabetically,
   so this file loads AFTER main.css but BEFORE utilities.css. The two
   consequences, both handled below:

     - Field sizing beats main.css on order, but the rules are written scoped
       anyway (.control-strip input) so they don't silently depend on it.
     - The × and the Add button are bare <button> elements, and utilities.css's
       `BUTTON:not(.editor-button)` (0,1,1) loads later and would paint them
       filled blue. They are written the way line-items.css writes its action
       rail — the same element+attribute selector, one level deeper — so they
       win on specificity rather than on order. Don't flatten them to a single
       class.

   The panel around this needs .list-panel.has-popover (line-items.css), or
   its `overflow: hidden` clips the results.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE STRIP — a tinted band of controls.

   Tinted rather than white so it reads as chrome for the list rather than as
   the list's first row. It is also the popover's positioning context.
   -------------------------------------------------------------------------- */

.control-strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: 0.875rem var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-field-fill);
}

/* Same trade .filter-bar makes: lift the global full-width cap, and step the
   type down from the brand's 18px/180% body to something a control row can
   hold. */
.control-strip input[type="search"],
.control-strip input[type="text"] {
  width: 100%;
  max-width: none;
  font-size: var(--fs-small);
  line-height: 1.5;
}

.control-strip-hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   2. THE FIELD — icon on the left, clear on the right.
   -------------------------------------------------------------------------- */

/* The GET form around the field contributes no box of its own, so the field
   and any filter beside it are flex items of the strip either way — the
   nested mode of the partial renders no form at all and lays out the same. */
.search-form {
  display: contents;
}

.search-field {
  position: relative;
  flex: 1 1 16rem;
  max-width: 26rem;
  margin: 0;
}

.search-field input[type="search"] {
  padding-left: 2.25rem;
  padding-right: 2.75rem;
}

/* Two clear affordances in one field is one too many, and the native one only
   surfaces on hover or focus — which is the behavior being replaced. */
.search-field input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-caret);
  pointer-events: none;
}

/* Climbs out of utilities.css's global BUTTON fill — see the load-order note.
   44px is the mobile floor; on a desktop control row 32px matches the other
   in-field affordances, and the field itself is the larger target beside it. */
.search-field BUTTON:not(.editor-button).field-clear {
  position: absolute;
  right: 0.3125rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  box-shadow: none;
  color: var(--color-text-muted);
  line-height: 0;
  cursor: pointer;
}

.search-field BUTTON:not(.editor-button).field-clear:hover {
  background: var(--niebla);
  color: var(--hollin);
}

/* The UA rule for [hidden] loses to the display above, so it needs restating
   — the × is hidden whenever there is nothing to clear. */
.search-field BUTTON:not(.editor-button).field-clear[hidden] {
  display: none;
}


/* --------------------------------------------------------------------------
   3. RESULTS — a popover hung off the strip.

   Absolutely positioned, so an empty frame is not a flex item taking a gap in
   the strip. Spans the panel's content width rather than the field's: a result
   row carries a name, where the person already is, and its own button.
   -------------------------------------------------------------------------- */

.record-search-results {
  position: absolute;
  top: calc(100% - 0.25rem);
  right: var(--space-6);
  left: var(--space-6);
  z-index: 9;
  display: block;
}

.results-popover {
  overflow: hidden;
  border: 1px solid var(--color-field-border);
  border-radius: 0.875rem;
  background: var(--nieve);
  box-shadow: var(--shadow-popover);
}

.results-list {
  max-height: 20rem;
  overflow-y: auto;
}

.result-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
}

.result-row + .result-row {
  border-top: 1px solid var(--color-popover-divider);
}

/* Deliberately no hover fill and no pointer on the row: the button is the only
   thing that attaches anything, and a row that lights up under the cursor
   promises otherwise. */
.result-body {
  flex: 1;
  min-width: 0;
}

.result-name {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--hollin);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-meta {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* The same 38px rail button .line-item-action is, so a screen never shows
   three heights of the same kind of control. Scoped past utilities.css. */
.results-list BUTTON:not(.editor-button),
.results-list INPUT[type="submit"] {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 0.9375rem;
  border: 1px solid var(--brisa);
  border-radius: var(--radius-md);
  background: var(--nieve);
  color: var(--color-link);
  font-family: var(--font-family-base);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

.results-list BUTTON:not(.editor-button):hover,
.results-list INPUT[type="submit"]:hover {
  background: var(--niebla);
  color: var(--color-link);
}

/* button_to wraps its button in a form; the form is the flex item. */
.results-list FORM.button_to {
  display: flex;
  flex: none;
  margin: 0;
}

.results-empty {
  margin: 0;
  padding: 0.875rem var(--space-4);
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.5625rem 0.875rem;
  border-top: 1px solid var(--color-popover-divider);
  background: var(--trigo);
}

.results-count {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--chocolate);
}

/* Leaves the page for the record's own "new" form, the same trade
   .picker-create makes. */
.results-create {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-link);
  text-decoration: none;
}

.results-create:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   4. NARROW SCREENS — same single breakpoint the rest of the system uses.
   -------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .control-strip {
    padding: var(--space-3) var(--space-4);
  }

  .search-field {
    flex: 1 1 100%;
    max-width: none;
  }

  .record-search-results {
    right: var(--space-4);
    left: var(--space-4);
  }

  /* The 44px hit target is not negotiable — see line-items.css. */
  .search-field BUTTON:not(.editor-button).field-clear {
    width: 2.75rem;
    height: 2.75rem;
    right: 0.125rem;
  }

  .results-list BUTTON:not(.editor-button),
  .results-list INPUT[type="submit"] {
    height: auto;
    min-height: 44px;
  }
}