/* ===========================================================================
   aufklappfelder.css  —  18.09.2026

   Ansage Matthias: "alle Aufklappfelder anpassen. Das wollte ich schon immer
   so haben." Ausloeser war das Neues-Ticket-Fenster: darin steht die
   Kundensuche mit Trefferkarten im App-Stil, und zwei Zeilen darunter ein
   nacktes Systemfeld.

   GEMESSEN am 18.09.2026: 95 <select> in 32 Modulen. 71 tragen
   class="field-input", 24 nicht — die haengen an .edit-input, .bu-sel,
   .tmass-sel oder an Inline-Stilen, einige sind voellig nackt. In der ganzen
   CSS stand zu <select> bis heute KEINE Regel, auch keine appearance.

   WAS HIER GEHT UND WAS NICHT: Gestaltet wird das GESCHLOSSENE Feld. Die
   aufgeklappte Liste eines echten <select> zeichnet das Betriebssystem
   selbst; daran kommt kein CSS heran. Wer auch die offene Liste im App-Stil
   will, braucht ein eigenes Bedienelement — das ist der zweite Schritt und
   steht hier absichtlich noch nicht drin.

   WARUM STELLENWEISE !important: 24 der 95 Felder tragen Inline-Stile, und
   mehrere davon setzen die Kurzform "background: ...". Die setzt
   background-image auf none. Ohne !important verloere der Pfeil genau dort
   gegen den Inline-Stil — und weil appearance:none den System-Pfeil ohnehin
   entfernt, stuenden diese Felder danach GANZ OHNE Pfeil da. Die Kurzform
   gewinnt weiterhin bei Farbe und Rahmen; erzwungen wird nur das, was den
   Pfeil sichtbar haelt.

   AUSGENOMMEN: select[multiple] und select[size] — das sind Listenfelder
   (core.js Benutzerverwaltung), die klappen nicht auf und brauchen keinen
   Pfeil.
   =========================================================================== */

/* --- 1. Grundaussehen, ohne Zwang ---------------------------------------
   Gilt fuer die nackten Felder. Alles Spezifischere (.field-input,
   .edit-input, Inline-Stile) gewinnt weiterhin und bleibt wie bisher. */
select:not([multiple]):not([size]) {
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
  transition: border 0.15s;
}

select:not([multiple]):not([size]):focus {
  outline: none;
  border-color: var(--accent-blue);
}

select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- 2. Pfeil und Platz dafuer, erzwungen -------------------------------
   Der System-Pfeil verschwindet, an seine Stelle tritt ein eigener.
   Graublau, damit er in hell wie dunkel lesbar bleibt. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238b93a7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  background-size: 11px 7px !important;
  padding-right: 32px !important;
}

/* Altes Edge zeichnete zusaetzlich einen eigenen Pfeil. */
select::-ms-expand { display: none; }

/* --- 3. Eintraege --------------------------------------------------------
   Auf macOS zeichnet das System die offene Liste und ignoriert das hier.
   Unter Windows und Linux greift es in Chrome und Firefox sehr wohl —
   dort sieht die Liste damit aus wie die App und nicht wie ein Fremdkoerper. */
select:not([multiple]):not([size]) option {
  background-color: var(--bg-card);
  color: var(--text);
}

/* --- 4. Mobil -----------------------------------------------------------
   mobile.css hebt Eingabefelder auf 16px, damit iOS beim Antippen nicht
   hineinzoomt. Der Pfeil braucht dann etwas mehr Luft. */
@media (max-width: 768px) {
  select:not([multiple]):not([size]) {
    padding-right: 34px !important;
    background-position: right 12px center !important;
  }
}