/* ==========================================================================
   uver-select.css  ·  Styling für durchsuchbare Dropdowns (additiv)
   Nutzt vorhandene Theme-Variablen (--dark/--light/--blue) mit Fallbacks,
   passt sich also automatisch an Light/Dark sowie das modernisierte Theme an.
   ========================================================================== */

.uvsel-wrap { position: relative; width: 100%; }

/* Natives Select unsichtbar, aber funktional (FormData/Validierung bleiben) */
.uvsel-wrap > select {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  left: 0; bottom: 0;
}

/* Auslöse-Button = sieht aus wie ein normales Eingabefeld */
.uvsel-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--uv-surface, var(--light, #fff));
  color: var(--uv-text, var(--dark, #333));
}
.uvsel-button .uvsel-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uvsel-button.uvsel-placeholder .uvsel-value { color: var(--uv-text-muted, var(--grey, #707070)); opacity: .8; }
.uvsel-caret { font-size: .75em; opacity: .6; transition: transform .15s ease; flex: 0 0 auto; }
.uvsel-wrap.uvsel-open .uvsel-caret { transform: rotate(180deg); }
.uvsel-wrap.uvsel-disabled { opacity: .6; }
.uvsel-wrap.uvsel-disabled .uvsel-button { cursor: not-allowed; }

/* Panel */
.uvsel-panel {
  position: relative;
  z-index: 1100;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--uv-surface, var(--light, #fff));
  color: var(--uv-text, var(--dark, #333));
  border: 1px solid var(--uv-border, var(--light-grey, #ddd));
  border-radius: var(--uv-radius, 10px);
  box-shadow: var(--uv-shadow-lg, 0 12px 28px rgba(0,0,0,.18));
  overflow: hidden;
}

.uvsel-search-box {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--uv-border, var(--light-grey, #eee));
  position: sticky; top: 0;
  background: var(--uv-surface, var(--light, #fff));
}
.uvsel-search-box i { opacity: .55; }
.uvsel-search {
  flex: 1; border: 0; outline: none; background: transparent;
  font: inherit; color: inherit; padding: 4px 0;
}

.uvsel-list { max-height: 260px; overflow-y: auto; padding: 4px; }
.uvsel-item {
  padding: 8px 10px;
  border-radius: var(--uv-radius-sm, 7px);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uvsel-item:hover { background: var(--uv-primary-soft, rgba(14,133,223,.10)); }
.uvsel-item.selected {
  background: var(--uv-primary, var(--blue, #0e85df));
  color: #fff;
}
.uvsel-item.disabled { opacity: .45; cursor: not-allowed; }
.uvsel-empty { padding: 12px 10px; text-align: center; opacity: .6; font-size: .9em; }