/* ============================================================================
   tm_design/auswahl.css — jede Auswahl im ERP-Design (Haris 15.10.2026)
   Gehört zu tm_design/auswahl.js. Vorbild: Vorschlagsliste der Kundensuche
   (.artdrop in components.css) — weiße Karte mit Schatten, Zeilen mit
   Trennlinie, markierte Zeile goldtönig. Nur Variablen aus tokens.css, damit
   Hell und Dunkel von selbst stimmen.
   ============================================================================ */

/* ---- Der Knopf: das native Select ohne System-Aussehen ------------------
   Breite, Höhe, Rahmen und Fokusring kommen weiter aus components.css und den
   Seitenregeln. Hier nur: System-Aussehen aus, Pfeil im ERP-Stil (zwei
   Verläufe in --muted, keine Grafikdatei, keine feste Farbe), Platz rechts. */
.tm select:not([multiple]):not([size]):not([data-nativ]){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:32px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.tm select:not([multiple]):not([size]):not([data-nativ])[aria-expanded="true"]{
  border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);
  background-image:linear-gradient(135deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(45deg,var(--gold) 50%,transparent 50%)}
.tm select:not([multiple]):not([size]):not([data-nativ]):disabled{cursor:not-allowed;opacity:.6}
.tm select:not([multiple]):not([size]):not([data-nativ])::-ms-expand{display:none}

/* ---- Die Liste ------------------------------------------------------------
   fixed und an <body> gehängt (wie .tm-zmenue-liste): keine Karte mit
   overflow:hidden schneidet sie ab. Über Panel (1150) und Kontextmenü (1200). */
.tm .tm-aw-liste{position:fixed;z-index:1400;display:flex;flex-direction:column;min-width:200px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);overflow:hidden;font-family:var(--font);color:var(--ink);
  max-height:360px;animation:tm-aw-ein .12s ease-out}
.tm .tm-aw-liste[hidden]{display:none}
@keyframes tm-aw-ein{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.tm .tm-aw-liste.oben{animation-name:tm-aw-ein-oben}
@keyframes tm-aw-ein-oben{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .tm .tm-aw-liste{animation:none} }

/* Suchfeld ab 12 Einträgen — Lupe statt Platzhaltertext. */
.tm .tm-aw-suche{flex:0 0 auto;position:relative;padding:8px;border-bottom:1px solid var(--line);background:var(--surface)}
.tm .tm-aw-suche svg{position:absolute;left:20px;top:50%;width:15px;height:15px;transform:translateY(-50%);
  color:var(--muted);pointer-events:none}
.tm .tm-aw-liste .tm-aw-suche input{width:100%;max-width:none;height:36px;padding:0 12px 0 36px;font-size:13.5px;
  border-radius:var(--r-md)}

/* Zeilen — wie .artdrop button */
.tm .tm-aw-zeilen{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;position:relative}
.tm .tm-aw-z{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.3;color:var(--ink);cursor:pointer;user-select:none}
.tm .tm-aw-z:last-of-type{border-bottom:none}
.tm .tm-aw-z[hidden],.tm .tm-aw-gruppe[hidden],.tm .tm-aw-leer[hidden]{display:none}
.tm .tm-aw-z .t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.tm .tm-aw-z .meta{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.tm .tm-aw-z.an{background:var(--gold-soft)}
/* gewählter Eintrag: fett, Haken in Gold */
.tm .tm-aw-z[aria-selected="true"]{font-weight:700}
.tm .tm-aw-z[aria-selected="true"]::after{content:"";flex:0 0 auto;width:5px;height:10px;margin:-3px 4px 0 auto;
  border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tm .tm-aw-z[aria-selected="true"] .meta{margin-left:0}
.tm .tm-aw-z[aria-disabled="true"]{color:var(--muted);cursor:default;opacity:.55}
.tm .tm-aw-z.in-gruppe{padding-left:22px}
/* optgroup als Gruppenkopf */
.tm .tm-aw-gruppe{padding:9px 12px 6px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-sunken);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
.tm .tm-aw-leer{padding:12px;color:var(--muted);text-align:center}
/* wählbarer Gruppenkopf (<option data-kopf>, 25.10.2026): sieht aus wie der
   optgroup-Kopf, lässt sich aber anklicken; Markierung und Haken wie jede Zeile */
.tm .tm-aw-z.kopf{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);
  background:var(--surface-sunken);border-bottom:1px solid var(--line)}
.tm .tm-aw-z.kopf.an{background:var(--gold-soft)}

/* Telefon: größere Zeilen zum Antippen */
@media (max-width:700px){
  .tm .tm-aw-z{min-height:44px;padding:11px 14px;font-size:14.5px}
  .tm .tm-aw-liste .tm-aw-suche input{height:40px;font-size:16px}
}