/* combobox.css — styling for the reusable .pf-combobox component
 * (see static/js/combobox.js). Matches the glass + rust design tokens
 * so it drops into any form (public Erstanfrage, portal forms, …).
 * Self-contained: no dependency on page-local form styles. */

.pf-combobox {
  position: relative;
  width: 100%;
}

/* The visible search/display input. Mirrors the .ea-input glass field. */
.pf-combobox-input {
  width: 100%;
  height: 46px;
  padding: 0 38px 0 14px; /* room for the caret on the right */
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  font: inherit;
  font-size: 14px;
  color: var(--pf-ink-900);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 6px -2px rgba(58, 32, 18, 0.1);
  transition:
    border-color var(--pf-dur-fast, 140ms) var(--pf-ease, ease),
    box-shadow var(--pf-dur-fast, 140ms) var(--pf-ease, ease);
}
.pf-combobox-input::placeholder { color: var(--pf-ink-500); }
.pf-combobox-input:focus {
  outline: none;
  border-color: var(--pf-rust-500);
}

/* Caret (rotates when open). */
.pf-combobox-caret {
  position: absolute;
  top: 0;
  right: 12px;
  height: 46px;
  display: flex;
  align-items: center;
  pointer-events: none;
  color: var(--pf-ink-500);
  transition: transform var(--pf-dur-fast, 140ms) var(--pf-ease, ease);
}
.pf-combobox-open .pf-combobox-caret { transform: rotate(180deg); }

/* Dropdown panel — floating popover. */
.pf-combobox-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  background: var(--pf-glass-2, rgba(255, 251, 245, 0.96));
  border: 1px solid var(--pf-glass-border, rgba(255, 255, 255, 0.6));
  border-radius: 14px;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--pf-glass-shadow, 0 12px 32px -8px rgba(58, 32, 18, 0.28));
}
.pf-combobox-panel[hidden] { display: none; }

.pf-combobox-option {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--pf-ink-900);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hover and keyboard-active share the same highlight so mouse + keyboard
   feel identical. */
.pf-combobox-option:hover,
.pf-combobox-option.pf-combobox-active {
  background: rgba(184, 90, 54, 0.1);
  color: var(--pf-rust-700);
}
.pf-combobox-other { color: var(--pf-ink-700); font-style: italic; }
.pf-combobox-other:hover,
.pf-combobox-other.pf-combobox-active { font-style: normal; }

/* Thin scrollbar to match the glass aesthetic. */
.pf-combobox-panel::-webkit-scrollbar { width: 8px; }
.pf-combobox-panel::-webkit-scrollbar-thumb {
  background: rgba(58, 32, 18, 0.18);
  border-radius: 999px;
}