/* Die oeffentlichen Formulare (Bewerbung, Antrag) — Ergaenzungen zu Bootstrap 5.1.
 *
 * Eingebunden von ``public_forms/templates/bewerbung.html`` und
 * ``antrag.html``. Keine fremden Dateien: die Tipp-Suche
 * (``js/auswahl_suche.js``) und ihre Optik liegen hier.
 */

/* Schwebende Labels bleiben einzeilig (Befund Z130). Bootstrap 5.1 laesst ein
 * langes Label umbrechen, und die zweite Zeile liegt dann ueber dem Wert — im
 * Handy-Hochformat reichte dafuer schon „Bewilligte Qualifikation (Wenn …)".
 * Die langen Bedingungen stehen inzwischen als Hilfetext unter dem Feld; das
 * hier ist das Netz fuer alles, was trotzdem zu lang wird. Bootstrap 5.3 macht
 * es genauso. */
.form-floating > label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Am Auswahlfeld sitzt rechts der Pfeil; das Label soll nicht darunter laufen.
 * Die Breite gilt vor dem Verkleinern (scale .85), deshalb reicht der Abzug
 * der Pfeilbreite. */
.form-floating > .form-select ~ label {
  max-width: calc(100% - 2.25rem);
}

/* Hilfetext unter einem schwebenden Feld: nah am Feld, nicht am naechsten. */
.form-floating + .form-text {
  margin-top: .25rem;
}

/* ── Tipp-Suche an einer Auswahl (js/auswahl_suche.js) ─────────────────── */

.auswahl-suche {
  /* ``.form-floating`` ist schon ``position: relative``; die Liste haengt
   * sich darunter. */
  position: relative;
}

.auswahl-suche > input.form-select {
  /* Ein Textfeld mit der Optik der Auswahl: Pfeil rechts, Cursor zum Tippen. */
  cursor: text;
}

.auswahl-suche-liste {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  margin: .125rem 0 0;
  padding: .25rem 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .175);
  border-radius: .375rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  /* Die Hoehe setzt das Skript nach dem sichtbaren Bereich ueber der
   * Bildschirmtastatur; das hier ist der Rahmen ohne diese Messung. */
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.auswahl-suche-liste[hidden] {
  display: none;
}

.auswahl-suche-option {
  /* 44 px Zielgroesse fuer den Finger (WCAG 2.5.5). */
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  cursor: pointer;
  user-select: none;
}

.auswahl-suche-option[aria-selected="true"] {
  color: #fff;
  background-color: #0d6efd;
}

.auswahl-suche-option.ist-gewaehlt:not([aria-selected="true"]) {
  font-weight: 600;
}

.auswahl-suche-leer {
  padding: .5rem .75rem;
  color: #6c757d;
  cursor: default;
}


/* ── Upload-Flächen der Bewerbung ─────────────────────────────────────── */

/* Fehlender Lebenslauf: rot wie ein markiertes Feld (Befund Z39). */
.upload-area.is-invalid {
  border-color: #dc3545;
}

/* Die Flächen sind mit der Tastatur erreichbar (Sprungziel des
 * Sammelhinweises); der Fokus soll sichtbar sein. */
.upload-area:focus-visible {
  outline: 3px solid rgba(13, 110, 253, .5);
  outline-offset: 2px;
}

/* Der Sammelhinweis bekommt beim Laden den Fokus — ohne Umrandung, er ist
 * selbst schon unübersehbar. */
#formular-fehler:focus {
  outline: none;
}