/**
 * Nachtraegliche Korrekturen an Formular-Elementen.
 *
 * Bewusst eine eigene Datei und nicht in Styles/main.css: die ist aus
 * Scss/ per Grunt generiert (Bootstrap 5.3.3 + Projekt-SCSS, es gibt eine
 * main.css.map daneben) und wird beim naechsten Build ueberschrieben.
 */


/* ---------------------------------------------------------------------------
 * Dropdown-Pfeil bei <select class="form-control">
 *
 * main.css setzt auf .form-control ein pauschales appearance: none. Bei einem
 * <select> entfernt das den nativen Pfeil des Browsers, ohne Ersatz - das Feld
 * sieht dann aus wie ein Textfeld. Bootstrap 5 loest das ueber die eigene
 * Klasse .form-select, die hier aber nirgends gesetzt ist: alle Select-Felder
 * der Eigen-Extensions tragen form-control (Program, Nationality, Country,
 * CountryBiz, ReferralSource, Usergroup, State, User/Search).
 *
 * Statt die Klasse in acht Templates nachzuziehen, wird der Pfeil hier zentral
 * ergaenzt - damit sind auch kuenftige Selects abgedeckt. Das SVG ist dasselbe,
 * das Bootstrap fuer .form-select verwendet (--bs-form-select-bg-img), damit
 * beide Varianten gleich aussehen.
 * ------------------------------------------------------------------------- */
select.form-control {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
}

/*
 * Platz, damit lange Optionen nicht unter dem Pfeil verschwinden.
 *
 * Der zweite Selektor ist noetig, weil main.css mit
 * .multiStepFormTabs .form-control { padding: 10px } eine hoehere Spezifitaet
 * hat als select.form-control und das padding-right sonst ueberschreibt.
 * Bewusst ausgeschrieben statt per Verdopplungstrick oder !important.
 */
select.form-control,
.multiStepFormTabs select.form-control {
	padding-right: 2.25rem;
}

/* Mehrfachauswahl und aufgeklappte Listen haben keinen Pfeil */
select.form-control[multiple],
select.form-control[size]:not([size="1"]) {
	background-image: none;
	padding-right: 0.75rem;
}