/* Such-Dropdown (Combobox): macht ein natives <select class="js-search"> durchsuchbar.
   Das native <select> bleibt im DOM (Formwert + change-Events), wird nur unsichtbar –
   so bleibt die bestehende Editor-Logik (Gericht/Zutat, Übung/Workout) unverändert. */
.ss{position:relative}
.ss-native{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px;
  border:0!important;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}
.ss-trigger{width:100%;display:flex;align-items:center;gap:8px;text-align:left;
  padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);
  color:var(--text);font-size:1rem;font-family:inherit;line-height:1.35;cursor:pointer}
.ss.open .ss-trigger,.ss-trigger:focus{outline:none;border-color:var(--primary)}
.ss-trigger:disabled{opacity:.5;cursor:not-allowed}
.ss-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-val.ss-empty{color:var(--muted)}
.ss-caret{flex:none;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid var(--muted);transition:transform .15s;margin-left:2px}
.ss.open .ss-caret{transform:rotate(180deg)}
/* Panel: mindestens Trigger-Breite (setzt search_select.js), bei schmalen Triggern
   wächst es auf den Inhalt an. Bewusst OPAK (kein Glas): es liegt über beliebigen
   Formularfeldern — durchscheinender Text darunter macht es unleserlich.
   position:fixed + am body verankert, damit scrollende Container es nicht abschneiden;
   Position kommt deshalb komplett aus dem JS (place()). */
.ss-pop{position:fixed;z-index:var(--z-overlay-pop,550);left:0;top:0;
  width:max-content;max-width:min(340px, calc(100vw - 16px));
  display:flex;flex-direction:column;  /* max-height (aus JS) -> Liste scrollt, Suchfeld bleibt */
  background:#fff;
  border:1.5px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(38,33,92,.28);overflow:hidden}
[data-theme="dark"] .ss-pop{background:#282348}
[data-theme="dark"] .ss-pop{box-shadow:0 16px 40px rgba(0,0,0,.5)}
.ss-pop[hidden]{display:none}
.ss-searchwrap{padding:8px 8px 4px}
.ss-search{width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--text);font-size:.95rem;font-family:inherit}
.ss-search:focus{outline:none;border-color:var(--primary)}
/* max. ~9 Einträge sichtbar, Rest scrollt (Nutzer-Wunsch: 8–10) */
/* Hoehe kommt aus dem Panel (JS setzt max-height nach verfuegbarem Platz), die Liste
   scrollt darin. min-height:0 ist noetig, damit das Flex-Kind schrumpfen DARF. */
.ss-list{list-style:none;margin:0;padding:4px;flex:1 1 auto;min-height:0;overflow-y:auto}
.ss-searchwrap{flex:0 0 auto}
.ss-opt{padding:9px 11px;border-radius:8px;cursor:pointer;font-size:.95rem;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-opt.hi,.ss-opt:hover{background:var(--primary-soft)}
.ss-opt.sel{color:var(--primary-deep);font-weight:600}
.ss-opt.sel::after{content:'\2713';float:right;color:var(--primary);margin-left:8px}
.ss-none{padding:12px 11px;color:var(--muted);font-size:.9rem;text-align:center}