/* The type-ahead that replaces select2 on autocomplete foreign keys.
   See fk-search.js for why. The dropdown itself is not styled here - it
   reuses .city-suggest-list / .city-suggest-item from admin_overrides.css,
   shared with the comune and prestazione searches. */

.fk-search {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 26rem;
}

/* Selector shape matters here. Django's own responsive.css sizes fields
   below 1024px with ".form-row input[type=\"text\"], ..." - a class plus an
   attribute - so a plain .fk-search-input, or even input.fk-search-input,
   lost its height and padding to it on every screen under a desktop.
   ".fk-search input.fk-search-input" matches that weight, and this file
   loads after django's, so the tie falls our way.

   Matched to the other fields on the form rather than left at select2's
   own size: the patient box used to render 30px tall next to 36px selects
   and a 33px date input, so the one field every fattura starts with was
   also the smallest thing on the page. Same height, same radius, same
   padding as .form-row select in brand.css. */
.fk-search input.fk-search-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  padding: 7px 34px 7px 11px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--form-input-bg, var(--body-bg));
  color: var(--body-fg);
  font-size: 0.85rem;
  line-height: 1.35;
}

/* It stays visibly a chooser rather than a plain text box - the user asked
   for it to keep a look of its own, and it does behave differently from
   the free-text fields around it. */
.fk-search::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 13px;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid var(--body-quiet-color);
  border-bottom: 1.5px solid var(--body-quiet-color);
  transform: rotate(45deg);
  pointer-events: none;
}

.fk-search input.fk-search-input:focus {
  border-color: var(--md-accent);
  outline: 2px solid var(--md-focus-ring);
  outline-offset: -1px;
}

.fk-search input.fk-search-input::placeholder {
  color: var(--body-quiet-color);
  opacity: 0.8;
}

/* Sits where the chevron is, and covers it while there is something to
   clear - two controls in the same corner would be one too many. */
.fk-search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--darkened-bg);
  color: var(--body-quiet-color);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

/* The script hides this with the hidden attribute when there is nothing to
   clear, and "display: flex" above outranks the browser's own
   [hidden] { display: none } - so without this the × sat on every empty
   field, offering to clear nothing. */
.fk-search-clear[hidden] {
  display: none;
}

.fk-search-clear:hover {
  background: var(--border-color);
  color: var(--body-fg);
}

.fk-search:has(.fk-search-clear:not([hidden]))::after {
  display: none;
}

/* "Nessun risultato" is a message, not a choice. */
.city-suggest-item.is-empty {
  color: var(--body-quiet-color);
  font-style: italic;
  cursor: default;
}

/* In the phone editing sheet the field is already full width and the max
   above would leave it short of the right edge. */
.rowsheet-body .fk-search {
  max-width: none;
}

@media (max-width: 767px) {
  .fk-search {
    max-width: none;
  }

  .fk-search input.fk-search-input {
    min-height: 42px;
    /* 16px: anything smaller and iOS zooms the page when the field is
       focused, which on a form is a jarring place for it to happen. */
    font-size: 1rem;
  }
}