/* RUDI Glass-Form-Controls — geteilte Komponente (14.07.2026)
   Stufe 1: geschlossener Zustand aller Selects + Checkboxen + Datei-Buttons glasig (alle Browser).
   Stufe 2: @supports (appearance: base-select) — stylbares Aufklapp-Panel, nur Desktop-Pointer
            (Chrome/Edge 135+, Safari 27+; iPhone/Android behalten bewusst den nativen Picker).
   Erwartet die Modul-Variablen --input-bg, --input-border, --text-primary, --accent (Grundlayer).
   Einbinden NACH dem Modul-CSS, damit die Regeln gewinnen. */

select {
  appearance: none;
  -webkit-appearance: none;
  --gs-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23636366' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-image: var(--gs-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
[data-theme="dark"] select {
  --gs-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent, #04b3d6);
  box-shadow: 0 0 0 3px rgba(4, 179, 214, .18);
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent, #04b3d6);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 650;
  color: var(--text-primary);
  background: rgba(127, 127, 135, .14);
  border: 1px solid rgba(127, 127, 135, .45);
  border-radius: 8px;
  padding: 7px 12px;
  margin-right: 10px;
  cursor: pointer;
  transition: background .18s ease;
}
input[type="file"]::file-selector-button:hover { background: rgba(127, 127, 135, .26); }

/* Stufe 2: Glas-Picker — Opt-in nur fuer Desktop-Maus, damit Touch-Geraete ihre nativen
   (touch-optimierten) Picker behalten. Das Picker-Styling darunter ist absichtlich ungegated:
   es wirkt nur, wenn base-select aktiv ist. */
@supports (appearance: base-select) {
  @media (hover: hover) and (pointer: fine) {
    select, ::picker(select) { appearance: base-select; }
    select { background-image: none; padding-right: 11px; }
  }

  ::picker(select) {
      background: var(--card-bg, rgba(255, 255, 255, .75));
      -webkit-backdrop-filter: blur(14px) saturate(140%);
      backdrop-filter: blur(14px) saturate(140%);
      color: var(--text-primary);
      border: 1px solid rgba(127, 127, 135, .45);
      border-radius: 12px;
      box-shadow: 0 12px 44px rgba(0, 0, 0, .16);
      padding: 6px;
      margin: 0;
      top: calc(anchor(bottom) + 4px);
      opacity: 0;
      transform: translateY(-4px) scale(.98);
      transition: opacity .16s ease, transform .16s ease,
        overlay .16s ease allow-discrete, display .16s ease allow-discrete;
    }
  select:open::picker(select) { opacity: 1; transform: none; }
  @starting-style {
    select:open::picker(select) { opacity: 0; transform: translateY(-4px) scale(.98); }
  }

  select option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font: inherit;
    color: var(--text-primary);
    cursor: pointer;
  }
  select option:hover, select option:focus-visible { background: rgba(4, 179, 214, .12); outline: none; }
  select option:checked { font-weight: 700; }
  select option::checkmark { color: var(--accent, #04b3d6); }
  select optgroup { font-size: .78rem; color: var(--text-secondary, #636366); padding: 4px 6px; }

  select::picker-icon { transition: rotate .18s ease; }
  select:open::picker-icon { rotate: 180deg; }
}