/*
 * VBVCalc-Design für tom-select
 *
 * Portiert 1:1 aus dem bisherigen bootstrap-select-Styling in style.css
 * (Block ".bootstrap-select ...", ca. Zeile 9416ff.), damit die Selects
 * genauso aussehen wie vorher und zu den übrigen Formularfeldern passen.
 *
 * Muss NACH tom-select.min.css eingebunden werden.
 */

.ts-wrapper.selectpicker {
  width: 100% !important;
  position: relative;
}

/* --- Das Control (geschlossener Zustand) ------------------------------- */

.ts-wrapper.selectpicker .ts-control {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 17px;
  line-height: 24px;
  color: #000000;
  font-weight: 700;
  padding: 9px 15px;
  padding-right: 58px; /* Platz für die Pfeil-Box (43px) */
  border: 1px solid #9b9b9b;
  background-color: #ffffff;
  height: auto;
  outline: 0;
  box-shadow: none;
  text-transform: none;
  border-radius: 0;
  transition: border-color 0.3s ease 0s;
  cursor: pointer;
  flex-wrap: nowrap;
  /* Höhe wie ein normales Eingabefeld, auch solange die Liste noch leer ist
     (24px line-height + 2x9px padding + 2x1px border) */
  min-height: 44px;
}

.ts-wrapper.selectpicker .ts-control:hover,
.ts-wrapper.selectpicker.focus .ts-control,
.ts-wrapper.selectpicker .ts-control:focus-within {
  border-color: #000000;
  outline: 0;
  box-shadow: none;
}

.ts-wrapper.selectpicker .ts-control .item {
  font-weight: 700;
  color: #000000;
  /* einzeilig halten, auch bei langen Texten wie "61,5 Jahre" */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Das interne Suchfeld ist readonly (siehe init.js) und wird nicht gebraucht.
   TomSelect gibt ihm beim Öffnen aber min-width:7rem, wodurch der ausgewählte
   Wert daneben umbrechen würde. Deshalb auf Breite 0 setzen — nicht
   display:none, sonst kann TomSelect den Fokus nicht mehr setzen. */
.ts-wrapper.selectpicker .ts-control > input {
  min-width: 0 !important;
  width: 0 !important;
  flex: 0 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Pfeil-Box rechts (entspricht .bs-caret) --------------------------- */

.ts-wrapper.selectpicker .ts-control::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 43px;
  border-left: 1px solid #9b9b9b;
  background: #ffffff;
  pointer-events: none;
}

.ts-wrapper.selectpicker .ts-control::before {
  font-family: 'icomoon';
  font-size: 16px;
  line-height: 16px;
  content: '\e919';
  color: #000000;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

/* geöffnet: anderes Icon, wie vorher bei .bootstrap-select.open */
.ts-wrapper.selectpicker.dropdown-active .ts-control::before {
  content: '\e91a';
}

/* --- Dropdown-Liste ---------------------------------------------------- */

.ts-dropdown.selectpicker {
  font-size: 17px;
  line-height: 24px;
  background-color: #ffffff;
  border: 1px solid #9b9b9b;
  padding: 0;
  margin: 4px 0;
  text-transform: none;
  min-width: 200px;
  border-radius: 0;
  box-shadow: none;
}

.ts-dropdown.selectpicker .option {
  white-space: normal;
  font-weight: 700;
  color: #000000;
  padding: 10px 15px;
  transition: background-color 0.3s ease 0s;
}

.ts-dropdown.selectpicker .option:hover,
.ts-dropdown.selectpicker .option.active,
.ts-dropdown.selectpicker .option.selected {
  background-color: #ebebeb;
  color: #000000;
}

/* --- Fehler- und Disabled-Zustand -------------------------------------- */

.parsley-error .ts-wrapper.selectpicker .ts-control {
  border-color: #e62319;
}

.ts-wrapper.selectpicker.disabled .ts-control,
.ts-wrapper.selectpicker.disabled .ts-control::after {
  background-color: #ebebeb;
  cursor: default;
}