/* ============================================================
   .pb-select — custom <select> with a chevron
   ------------------------------------------------------------
   Markup: <div class="pb-select"><select>…</select>
            <span class="chev"><svg…/></span></div>
   The native select is restyled; the chevron is an absolutely
   positioned, pointer-events:none glyph (rotated to point down).
   ============================================================ */
.pb-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pb-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.125rem 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--input-fill);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pb-select select:hover { background: var(--surface-3); }
.pb-select select:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--text) 7%, var(--surface-2)); /* kein Ring (07.10.2026) */
}

.pb-select .chev {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%) rotate(90deg); /* the > glyph points down */
  display: grid;
  place-items: center;
  color: var(--text-faint);
  pointer-events: none;
}
.pb-select .chev svg { width: 16px; height: 16px; }

/* ---- Dark theme ---- */
/* --surface fällt auf Dunkel UNTER die surface-2-Ruhefläche — der
   Fokus dunkelte das Feld ab statt es zu heben. */
/* ============================================================
   .pb-csel — das eine Auswahlfeld der App (07.11.2026)
   ------------------------------------------------------------
   Vorlage Osmo „Custom Select (Single/Multiple)“ in Pingbook-Tokens.
   Markup legt components/custom-select.js um jedes <select> an
   (data-Attribute wie die Vorlage): das native Feld bleibt
   unsichtbar die Quelle der Wahrheit, darüber Knopf + Liste.
   Knopf = Feld-Optik der App (--input-fill, --r-md, kein Ring),
   Liste = Pop-out-Grammatik der App wie Sortieren/Merken/⋮-Menü
   (--surface, --r-xl, Zeilen 40px, Hover --fill-hover, gewählte
   Zeile fett mit Haken in Tinte; seit 08.11.2026 statt der
   invertierten Osmo-Fläche). Von Osmo bleiben die Bewegungen:
   Chevron dreht, Liste federt auf, Haken zeichnet sich.
   Die Regeln oben (.pb-select) bleiben nur der Rückfall ohne JS.
   ============================================================ */
.pb-csel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--text);
}
/* Feld ohne eigene Hülle (z. B. Sprache in den Einstellungen) */
.pb-csel.pb-csel--inline { display: inline-flex; width: auto; min-width: 11rem; }

/* Das native Feld: unsichtbar, aber im Formular und für Skripte da.
   !important, weil Seiten-Regeln (.page.profil .select select …) es
   sonst wieder aufziehen. */
.pb-csel > select[data-select-input] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.pb-csel__custom { position: relative; width: 100%; }

.pb-csel__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  padding: 0.6875rem 0.875rem;
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  color: inherit;
  background: var(--input-fill);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.pb-csel__button:hover { background: color-mix(in srgb, var(--text) 4%, var(--input-fill)); }
.pb-csel__button:focus-visible,
.pb-csel__button[aria-expanded="true"] {
  outline: none;
  background: var(--input-focus-fill); /* kein Ring (07.10.2026) */
}
.pb-csel__button:disabled { cursor: default; opacity: 0.55; }
.pb-csel__button[data-default] { color: var(--text-faint); }
.pb-csel__button-span { overflow: hidden; text-overflow: ellipsis; }

.pb-csel__button-icon {
  flex: none;
  display: block;
  width: 1em;
  height: 1em;
  margin-right: -0.125em;
  color: var(--text-faint);
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
  transform: rotate(0.001deg);
}
.pb-csel:has([data-select-toggle][aria-expanded="true"]) .pb-csel__button-icon { transform: rotate(180deg); }

.pb-csel__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-popover);
  width: 100%;
  min-width: max-content;
  padding-top: 0.375rem;
  transform-origin: top center;
  transform: translateY(0) scale(0.95) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}
/* Kein Platz nach unten: nach oben aufklappen (custom-select.js setzt das Attribut) */
.pb-csel[data-drop-up] .pb-csel__dropdown {
  top: auto;
  bottom: 100%;
  padding-top: 0;
  padding-bottom: 0.375rem;
  transform-origin: bottom center;
}
/* In Behältern, die Überstehendes abschneiden (Fenster-Körper): fest über
   der Seite, Lage und Breite setzt custom-select.js beim Öffnen */
.pb-csel[data-fixed] .pb-csel__dropdown {
  position: fixed;
  top: var(--csel-top);
  bottom: auto;
  left: var(--csel-left);
  width: var(--csel-width);
  z-index: calc(var(--z-modal) + 10);
}
.pb-csel:has([data-select-toggle][aria-expanded="true"]) .pb-csel__dropdown {
  transform: translateY(0) scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* Einzelauswahl: nach dem Wählen den Haken kurz zeigen, dann schließen */
.pb-csel:has([data-select-input]:not([multiple])):has([data-select-option][aria-selected="true"]):has([data-select-toggle][aria-expanded="false"]) .pb-csel__dropdown {
  transition-delay: 0.5s;
}

.pb-csel__dropdown-list {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: var(--csel-max, 20rem);  /* custom-select.js kürzt auf den freien Platz */
  padding: 0.5rem;                       /* wie .sortpop */
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--text);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .pb-csel__dropdown-list { box-shadow: var(--shadow-lg), 0 0 0 0.0625rem var(--hairline-strong); }

.pb-csel__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.5rem;                    /* Pop-out-Zeile wie .sort-opt */
  padding: 0 0.75rem;
  font-size: var(--fs-body);
  line-height: 1.2;
  white-space: nowrap;
  border-radius: calc(var(--r-xl) - 0.5rem); /* konzentrisch zur Liste */
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.pb-csel__option:is([data-active], :hover) { background-color: var(--fill-hover); }
.pb-csel:has([data-select-input]:not([multiple])) .pb-csel__option[aria-selected="true"]:not([data-select-default]) .pb-csel__option-span { font-weight: 600; }
.pb-csel__option[data-select-default] { color: var(--text-faint); cursor: default; }
.pb-csel__option[data-select-default]:hover { background-color: transparent; }
.pb-csel__option-span { flex: 1; }

/* Mehrfachauswahl: Kästchen wie die App-Checkbox (.pb-cb) */
.pb-csel__checkbox {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  margin-left: -0.25em;
  color: var(--primary-text);
  background-color: transparent;
  border: 0.09375rem solid rgb(var(--tint) / 0.28);
  border-radius: 0.375rem;
  transform: scale(1) rotate(0.001deg);
  transition: background-color 0.15s ease, border-color 0.1s ease;
}
[data-select-option][aria-selected="true"] .pb-csel__checkbox {
  background-color: var(--primary);
  border-color: transparent;
  animation: pb-csel-jump 0.4s cubic-bezier(0.35, 1.5, 0.6, 1);
}

/* Der Haken: zwei Striche, die sich nacheinander zeichnen */
.pb-csel__checkbox-check {
  position: relative;
  aspect-ratio: 2 / 3;
  width: 0.3125em;
  transform: translateY(-12.5%) rotate(45deg);
}
.pb-csel:has([data-select-input]:not([multiple])) .pb-csel__checkbox-check {
  width: 0.4375em;
  color: var(--text);                    /* Haken in Tinte wie .sort-opt-ck */
}
.pb-csel__checkbox-check::before,
.pb-csel__checkbox-check::after {
  content: "";
  position: absolute;
  width: 0.125em;
  height: 0.125em;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease 0.15s;
}
.pb-csel__checkbox-check::before { width: 100%; bottom: 0; transform-origin: left center; transform: scaleX(0); }
.pb-csel__checkbox-check::after { height: 100%; right: 0; transform-origin: bottom center; transform: scaleY(0); }
[data-select-option][aria-selected="true"]:not([data-select-default]) .pb-csel__checkbox-check::before {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 0.2s cubic-bezier(0.76, 0, 0.24, 1);
}
[data-select-option][aria-selected="true"]:not([data-select-default]) .pb-csel__checkbox-check::after {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 0.4s cubic-bezier(0.35, 1.5, 0.6, 1) 0.15s;
}

@keyframes pb-csel-jump { 50% { transform: scale(1.25) rotate(0.001deg); } }

@media (prefers-reduced-motion: reduce) {
  .pb-csel__button-icon,
  .pb-csel__dropdown { transition: opacity 0.15s ease, visibility 0.15s ease; }
  .pb-csel__checkbox { animation: none !important; }
}