/* === idf-list-search-toggle ===============================================
   Freitext-Suche als Lupen-Pille (JS: idf-list-search-toggle.js).

   Geometrie und Skin der Pille kommen aus `.idf-list-toggle`
   (grid-css/idf-list-grid.css) - hier steht nur, was das Zusammenklappen
   und das Ueberlagern ausmacht, damit es genau EINE Toggle-Optik gibt.

   Der aufgeklappte Kasten deckt die Leiste ab und uebernimmt dabei exakt
   ihre Innenabstaende, damit das Feld in der Flucht der Filter darunter
   steht - auch bei den schmaleren Mobile-Overrides der Module. Die Werte
   setzt das JS beim Aufklappen aus der Leiste (`padding: inherit` erbt vom
   direkten Elternteil und griffe daneben, sobald das Feld in einem eigenen
   Wrapper sitzt - Nexus Ring). Feste Pixelwerte waeren erst recht falsch. */

.idf-list-bar { position: relative; }

.idf-list-search-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Zu: nur die Pille. Feld und X sind weg (nicht nur unsichtbar, sonst
   fingen sie Klicks ab und blieben in der Tab-Reihenfolge). */
.idf-list-search-box .idf-list-search,
.idf-list-search-box .idf-list-search-clear { display: none; }

/* Die Pille traegt ohne Begriff nur die Lupe: schmaler als ein Toggle mit
   Text, sonst identisch. */
.idf-list-search-pill { padding: 0 12px; }
.idf-list-search-pill .idf-list-search-term { display: none; }
.idf-list-search-pill.has-term .idf-list-search-term {
  display: inline;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Offen: der Wrapper legt sich ueber die erste Zeile der Leiste. Nur oben
   verankert, damit eine umgebrochene zweite Zeile sichtbar bleibt. */
.idf-list-search-box.is-open {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* padding setzt das JS aus der Leiste (siehe Kopf) */
  box-sizing: border-box;
  background: var(--bg, #fafafa);
  z-index: 5;
}

.idf-list-search-box.is-open .idf-list-search-pill { display: none; }

.idf-list-search-box.is-open .idf-list-search {
  display: block;
  flex: 1 1 auto;
  max-width: none;
}

.idf-list-search-box.is-open .idf-list-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: var(--radius-xs);
  background: var(--white, #fff);
  color: var(--mid, #555);
  font-size: 14px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.idf-list-search-box.is-open .idf-list-search-clear:hover {
  border-color: var(--mid, #555);
  background: var(--bg-hover, #f2f2f2);
  color: var(--ink, #111);
}