/* FnComboBox — Eingabe + aufklappbare Vorschlagsliste (KONZEPT-Design-Komponenten-Standard).
   Eigene Datei, weil die Liste eine SCHWEBENDE Fläche ist (--fn-surface, Rollen-Regel
   FINLIST004) — fn-forms.css bleibt damit frei von Floating-Hintergründen. Tokens-only.
   Das Eingabefeld selbst ist die geteilte .fn-field-Geometrie aus fn-forms.css. */

.fn-combo {
    position: relative;
    min-width: 0;
}

/* Element-Selektor statt .fn-input: das Feld IST die geteilte Primitive (FINCOMP001). */
.fn-combo > input {
    padding-right: 32px;
}

.fn-combo-toggle {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    padding: 6px;
    border: none;
    background: transparent;
    color: var(--fn-text-secondary);
    cursor: pointer;
}

.fn-combo-toggle svg {
    width: 14px;
    height: 14px;
}

.fn-combo-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px;
    background: var(--fn-surface);
    border: 1px solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    box-shadow: 0 12px 28px var(--fn-shadow);
}

.fn-combo-item {
    text-align: left;
    font: inherit;
    font-size: 12.5px;
    color: var(--fn-text);
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 7px 10px;
    cursor: pointer;
}

.fn-combo-item:hover {
    background: var(--fn-hover);
}

.fn-combo-item.on {
    color: var(--fn-primary);
    font-weight: 600;
}