/* ============================================================
   Onesown Blazor Components – FilterInput
   Filterfeld mit Vorschlagsmenü (key:wert-Bedingungen wie bei GitHub)
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */

.oo-filterinput {
    position: relative;
    width: 100%;
}

/* Disabled wie bei der TextBox (input.css): Label und Feld gemeinsam ausgegraut, Feld mit Hintergrund und blasser Schrift */
.oo-filterinput--disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.oo-filterinput--disabled .oo-filterinput__feld {
    background-color: var(--oo-color-background);
    cursor: not-allowed;
}

.oo-filterinput--disabled .oo-filterinput__input {
    color: var(--oo-color-text-disabled);
    cursor: not-allowed;
}

/* ── Eingabefeld ─────────────────────────────────────────── */

/* Bezugspunkt fürs Menü: direkt unter dem Feld, nicht unter Label oder Fehlerhinweis */
.oo-filterinput__anker {
    position: relative;
}

/* Höhe und Innenabstand je Size aus denselben Tokens wie TextBox und Select (siehe Size-Varianten unten) */
.oo-filterinput__feld {
    background-color: var(--oo-color-surface);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-border-radius);
    cursor: text;
    min-height: var(--oo-filterinput-hoehe, var(--oo-size-min-height-md));
    padding: 0 var(--oo-filterinput-abstand-x, var(--oo-size-padding-md-x));
    position: relative;
    transition: border-color var(--oo-transition-fast), box-shadow var(--oo-transition-fast);
}

/* Platz für den Leeren-Button ist immer reserviert, solange er erscheinen kann – so ändert sein Ein- und Ausblenden weder Höhe noch Breite.
   Derselbe Wert wie der Innenabstand der TextBox bei einem Knopf (InputPaddingRight in TextBox.razor.cs). */
.oo-filterinput__feld--leeren {
    padding-right: calc(1.85rem + 0.5rem);
}

/* Rahmen wie bei der TextBox (.form--input): dunkler beim Überfahren, beim Fokus nur die Farbe – kein zusätzlicher Ring */
.oo-filterinput__feld:hover {
    border-color: var(--oo-color-border-strong);
}

.oo-filterinput__feld:focus-within {
    border-color: var(--oo-primary);
}

.oo-filterinput.invalid .oo-filterinput__feld {
    border-color: var(--oo-danger);
}

.oo-filterinput__icon {
    color: var(--oo-color-text-subtle);
    flex-shrink: 0;
    font-size: 1.25em;
    line-height: 1;
}

.oo-filterinput__input {
    background: none;
    border: none;
    color: var(--oo-color-text);
    flex: 1;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    min-width: 0;
    outline: none;
    padding: var(--oo-filterinput-abstand-y, var(--oo-size-padding-md-y)) 0;
}

/* ReadOnly wie bei der TextBox (input.css): Hintergrund, gestrichelter Rahmen, kein Text-Cursor */
.oo-filterinput--readonly .oo-filterinput__feld {
    background-color: var(--oo-color-background);
    border-style: dashed;
    cursor: default;
}

.oo-filterinput--readonly .oo-filterinput__input {
    cursor: default;
}

/* Der Leeren-Button verwendet Button-Bereich und Icon-Buttons der TextBox (.oo-textbox--actions, .oo-textbox--icon-btn in textbox.css) */

/* ── Schwebendes Label (IsFloatingLabel) ─────────────────── */

/* Wie bei der TextBox (base.css): Das Label liegt mittig im Feld – mit Icon rechts davon – und wandert
   beim Fokus oder mit Text verkleinert auf den oberen Rahmen. Klicks gehen durch das Label ins Eingabefeld. */
.oo-filterinput--float .oo-filterinput__label {
    align-items: center;
    border: var(--oo-border-width) solid transparent;
    color: var(--oo-color-text-subtle);
    height: 100%;
    left: var(--oo-filterinput-abstand-x, var(--oo-size-padding-md-x));
    line-height: 1.5;
    margin: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: transform 0.25s ease, font-size 0.25s ease, left 0.25s ease;
}

.oo-filterinput--float.oo-filterinput--mit-icon .oo-filterinput__label {
    left: calc(var(--oo-filterinput-abstand-x, var(--oo-size-padding-md-x)) + 1.25em + var(--oo-space-2));
}

.oo-filterinput--float:has(.oo-filterinput__input:focus) .oo-filterinput__label,
.oo-filterinput--float:has(.oo-filterinput__input:not(:placeholder-shown)) .oo-filterinput__label {
    background-color: var(--oo-color-surface);
    font-size: calc(1em - var(--oo-float-label-font-reduction));
    height: auto;
    left: calc(var(--oo-filterinput-abstand-x, var(--oo-size-padding-md-x)) - var(--oo-space-1));
    line-height: 1;
    padding: 0 var(--oo-space-1);
    transform: translateY(-50%);
    z-index: 3;
}

.oo-filterinput--float:has(.oo-filterinput__input:focus) .oo-filterinput__label {
    color: var(--oo-primary);
}

.oo-filterinput--float.invalid .oo-filterinput__label {
    color: var(--oo-danger);
}

/* Platzhalter erst beim Fokus, solange das Label im Feld liegt */
.oo-filterinput--float .oo-filterinput__input:placeholder-shown::placeholder {
    color: transparent;
}

.oo-filterinput--float .oo-filterinput__input:focus::placeholder {
    color: var(--oo-color-text-subtle);
}

/* ── Vorschlagsmenü ──────────────────────────────────────── */

.oo-filterinput__menu {
    background-color: var(--oo-color-surface);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-radius-lg);
    box-shadow: var(--oo-shadow-lg);
    box-sizing: border-box;
    left: 0;
    margin-top: var(--oo-space-1);
    max-height: 20rem;
    max-width: min(24rem, 100%);
    min-width: min(18rem, 100%);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: var(--oo-space-1);
    position: absolute;
    top: 100%;
    width: max-content;
    z-index: var(--oo-z-dropdown);
}

.oo-filterinput__option {
    border-radius: var(--oo-radius-md);
    color: var(--oo-color-text);
    cursor: pointer;
    padding: var(--oo-space-2) var(--oo-space-3);
    user-select: none;
}

.oo-filterinput__option--aktiv {
    background-color: color-mix(in srgb, var(--oo-color-text) 8%, transparent);
}

.oo-filterinput__option-icon {
    color: var(--oo-color-text-subtle);
    flex-shrink: 0;
    font-size: 1.15em;
}

.oo-filterinput__option-text {
    min-width: 0;
}

.oo-filterinput__option-beschreibung {
    color: var(--oo-color-text-subtle);
    font-size: var(--oo-font-size-sm);
    min-width: 0;
}

.oo-filterinput__option-weiter {
    color: var(--oo-color-text-subtle);
    margin-left: auto;
}

/* Haken beim aktuellen Feld bzw. Wert nach Klick in eine bestehende Bedingung */
.oo-filterinput__option-aktuell {
    color: var(--oo-primary);
}

/* "Bedingung entfernen" am Ende des Feld-Menüs, durch eine Linie abgesetzt */
.oo-filterinput__option--entfernen {
    margin-top: calc(var(--oo-space-1) + var(--oo-border-width));
    position: relative;
}

.oo-filterinput__option--entfernen::before {
    border-top: var(--oo-border-width) solid var(--oo-color-border);
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: calc(-1 * var(--oo-space-1) / 2 - var(--oo-border-width));
}

.oo-filterinput__farbe {
    border-radius: var(--oo-radius-full);
    flex-shrink: 0;
    height: 0.75rem;
    width: 0.75rem;
}

.oo-filterinput__hinweis {
    color: var(--oo-color-text-subtle);
    font-size: var(--oo-font-size-sm);
    padding: var(--oo-space-2) var(--oo-space-3);
}

/* ── Fehlerhinweis ───────────────────────────────────────── */

.oo-filterinput__fehler {
    margin-top: var(--oo-space-2);
}

.oo-filterinput__fehler ul {
    margin: 0;
    padding-left: var(--oo-space-5);
}

/* ── Size-Varianten ──────────────────────────────────────── */

/* Dieselben Größen-Tokens wie .form--input (base.css): ein FilterInput ist so hoch wie TextBox und Button derselben Size */
.oo-filterinput.oo-size-xs {
    --oo-filterinput-hoehe: var(--oo-size-min-height-xs);
    --oo-filterinput-abstand-x: var(--oo-size-padding-xs-x);
    --oo-filterinput-abstand-y: var(--oo-size-padding-xs-y);
}

.oo-filterinput.oo-size-sm {
    --oo-filterinput-hoehe: var(--oo-size-min-height-sm);
    --oo-filterinput-abstand-x: var(--oo-size-padding-sm-x);
    --oo-filterinput-abstand-y: var(--oo-size-padding-sm-y);
}

.oo-filterinput.oo-size-md {
    --oo-filterinput-hoehe: var(--oo-size-min-height-md);
    --oo-filterinput-abstand-x: var(--oo-size-padding-md-x);
    --oo-filterinput-abstand-y: var(--oo-size-padding-md-y);
}

.oo-filterinput.oo-size-lg {
    --oo-filterinput-hoehe: var(--oo-size-min-height-lg);
    --oo-filterinput-abstand-x: var(--oo-size-padding-lg-x);
    --oo-filterinput-abstand-y: var(--oo-size-padding-lg-y);
}

.oo-filterinput.oo-size-xl {
    --oo-filterinput-hoehe: var(--oo-size-min-height-xl);
    --oo-filterinput-abstand-x: var(--oo-size-padding-xl-x);
    --oo-filterinput-abstand-y: var(--oo-size-padding-xl-y);
}

/* Mit schwebendem Label höher wie die TextBox (--oo-size-floating-label-min-height-*), damit das Label auf dem Rahmen Platz hat */
.oo-filterinput--float.oo-size-xs { --oo-filterinput-hoehe: var(--oo-size-floating-label-min-height-xs); }
.oo-filterinput--float.oo-size-sm { --oo-filterinput-hoehe: var(--oo-size-floating-label-min-height-sm); }
.oo-filterinput--float.oo-size-md { --oo-filterinput-hoehe: var(--oo-size-floating-label-min-height-md); }
.oo-filterinput--float.oo-size-lg { --oo-filterinput-hoehe: var(--oo-size-floating-label-min-height-lg); }
.oo-filterinput--float.oo-size-xl { --oo-filterinput-hoehe: var(--oo-size-floating-label-min-height-xl); }

.oo-filterinput.oo-size-xs .oo-filterinput__feld { font-size: var(--oo-font-size-xs); }
.oo-filterinput.oo-size-sm .oo-filterinput__feld { font-size: var(--oo-font-size-sm); }
.oo-filterinput.oo-size-md .oo-filterinput__feld { font-size: var(--oo-font-size-md); }
.oo-filterinput.oo-size-lg .oo-filterinput__feld { font-size: var(--oo-font-size-lg); }
.oo-filterinput.oo-size-xl .oo-filterinput__feld { font-size: var(--oo-font-size-xl); }