/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/select.css
   Version: 0.1.0 · Build: 2026-09-13 · Benötigt: tokens.css, base.css, field.css
   VENDORED — READ-ONLY.

   Natives <select>, gestylt. Bleibt ohne JavaScript bedienbar — das native
   Element wird nie aus dem DOM genommen.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-select {
  display: block;
  width: 100%;
  min-height: var(--bh-control-height);
  padding: 0 calc(var(--bh-space-6) + var(--bh-space-1)) 0 var(--bh-field-padding-x);

  border: 1px solid var(--bh-border-subtle);
  border-radius: var(--bh-radius-lg);
  background-color: var(--bh-surface-1);
  color: var(--bh-text-primary);

  font-family: inherit;
  font-size: var(--bh-text-sm);
  line-height: var(--bh-leading-normal);

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;

  /* Pfeil als data-URI, damit keine externe Datei nötig ist. Die Farbe
     entspricht --bh-text-muted (#71717A) und ist hier unvermeidlich fest —
     data-URIs können keine CSS-Variablen auflösen. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--bh-field-padding-x) center;
  background-size: 16px 16px;

  transition: border-color var(--bh-transition), box-shadow var(--bh-transition),
              background-color var(--bh-transition);
}

.bh-select:hover { border-color: var(--bh-border-strong); }

.bh-select:focus {
  outline: none;
  border-color: var(--bh-color-accent);
  box-shadow: var(--bh-focus-ring);
}
.bh-select:focus-visible { outline: none; }
.bh-select:active { border-color: var(--bh-color-accent); }

.bh-select:disabled {
  background-color: var(--bh-surface-2);
  color: var(--bh-text-muted);
  cursor: not-allowed;
}

.bh-select[aria-invalid="true"],
.bh-select.is-invalid { border-color: var(--bh-color-danger); }
.bh-select[aria-invalid="true"]:focus,
.bh-select.is-invalid:focus { box-shadow: var(--bh-focus-ring-danger); }

/* Optionen erben die Systemfarben des Betriebssystems; hier wird nur
   sichergestellt, dass sie im dunklen Thema lesbar bleiben. */
.bh-select option { background: var(--bh-surface-1); color: var(--bh-text-primary); }

.bh-select--multiple {
  min-height: calc(var(--bh-control-height) * 3);
  padding: var(--bh-space-2) var(--bh-field-padding-x);
  background-image: none;
}

@media (max-width: 767px) {
  .bh-select { min-height: var(--bh-control-height-touch); }
}