/* ============================================================
   WISO Filter – Modern (FINAL) + Themes (Light/Dark/Contrast)
   ------------------------------------------------------------
   Scope:
   - .wiso_filterWindow--modern  (Window/Form/Grid)
   - .wiso_popup / .wiso_popup--window_modal (Select + Dropdown)
   ------------------------------------------------------------
   Ziele:
   - runde Ecken (Window + Grid + Popups)
   - Select wie Input (kein doppelter Arrow)
   - Dropdown / Options-Liste (Popup) mitgestylt (so weit browserseitig möglich)
   - + / - Buttons modern, Icons sauber zentriert
   - Hover/Fokus konsistent (keine alten Styles)
   ============================================================ */


/* ============================================================
   THEME TOKENS (Default = Dark-Fallback)
   - Theme setzt nur Variablen, Styles bleiben gleich
   ============================================================ */

.wiso_filterWindow--modern,
.wiso_popup,
.wiso_popup--window_modal {
    /* Default (Dark) */
    --wf-surface-0: #0b1220;
    --wf-surface-1: #0f172a;
    --wf-surface-2: #111c33;
    --wf-text-1: rgba(255,255,255,0.92);
    --wf-text-2: rgba(255,255,255,0.78);
    --wf-border-1: rgba(255,255,255,0.10);
    --wf-border-2: rgba(255,255,255,0.14);
    --wf-input-bg: rgba(255,255,255,0.06);
    --wf-input-bg-hover: rgba(255,255,255,0.10);
    --wf-input-bg-active: rgba(255,255,255,0.12);
    --wf-focus: rgba(11,79,158,0.65);
    --wf-accent: rgba(11,79,158,0.95);
    --wf-danger-bg: rgba(255,80,80,0.10);
    --wf-danger-bg-hover: rgba(255,80,80,0.16);
    --wf-danger-border: rgba(255,80,80,0.22);
    --wf-shadow-inset: rgba(0,0,0,0.18);
}

/* Light */
[data-wiso-theme="light"] .wiso_filterWindow--modern,
[data-wiso-theme="light"] .wiso_popup,
[data-wiso-theme="light"] .wiso_popup--window_modal {
    --wf-surface-0: #f8fafc;
    --wf-surface-1: #eef2f7;
    --wf-surface-2: #e5eaf2;
    --wf-text-1: #0b1220;
    --wf-text-2: #334155;
    --wf-border-1: #cbd5e1;
    --wf-border-2: rgba(11,79,158,0.45);
    --wf-input-bg: #eef2f7;
    --wf-input-bg-hover: #e5eaf2;
    --wf-input-bg-active: #dde5f1;
    --wf-focus: rgba(11,79,158,0.55);
    --wf-accent: rgba(11,79,158,0.95);
    --wf-danger-bg: rgba(220,40,40,0.08);
    --wf-danger-bg-hover: rgba(220,40,40,0.12);
    --wf-danger-border: rgba(220,40,40,0.28);
    --wf-shadow-inset: rgba(0,0,0,0.10);
}

/* Contrast-Light */
[data-wiso-theme="contrast-light"] .wiso_filterWindow--modern,
[data-wiso-theme="contrast-light"] .wiso_popup,
[data-wiso-theme="contrast-light"] .wiso_popup--window_modal {
    --wf-surface-0: #ffffff;
    --wf-surface-1: rgba(0,0,0,0.04);
    --wf-surface-2: rgba(0,0,0,0.06);
    --wf-text-1: rgba(0,0,0,0.86);
    --wf-text-2: rgba(0,0,0,0.70);
    --wf-border-1: rgba(0,0,0,0.12);
    --wf-border-2: rgba(0,0,0,0.18);
    --wf-input-bg: rgba(0,0,0,0.04);
    --wf-input-bg-hover: rgba(0,0,0,0.06);
    --wf-input-bg-active: rgba(0,0,0,0.08);
    --wf-focus: rgba(11,79,158,0.55);
    --wf-accent: rgba(11,79,158,0.95);
    --wf-danger-bg: rgba(220,40,40,0.08);
    --wf-danger-bg-hover: rgba(220,40,40,0.12);
    --wf-danger-border: rgba(220,40,40,0.28);
    --wf-shadow-inset: rgba(0,0,0,0.12);
}

/* Contrast-Dark (etwas kräftiger) */
[data-wiso-theme="contrast-dark"] .wiso_filterWindow--modern,
[data-wiso-theme="contrast-dark"] .wiso_popup,
[data-wiso-theme="contrast-dark"] .wiso_popup--window_modal {
    --wf-border-1: rgba(255,255,255,0.16);
    --wf-border-2: rgba(255,255,255,0.22);
    --wf-input-bg: rgba(255,255,255,0.08);
    --wf-input-bg-hover: rgba(255,255,255,0.12);
    --wf-input-bg-active: rgba(255,255,255,0.14);
    --wf-shadow-inset: rgba(0,0,0,0.22);
}


/* ============================================================
   WINDOW: Rounding + Background
   ============================================================ */

.wiso_filterWindow--modern.wiso_window {
    border-radius: 14px !important;
    overflow: hidden !important;
    background: var(--wf-surface-1) !important;
}

.wiso_filterWindow--modern .wiso_window-header,
.wiso_filterWindow--modern .wiso_window-footer,
.wiso_filterWindow--modern .wiso_window-content {
    border-radius: 0 !important;
}

.wiso_filterWindow--modern .wiso_window-header {
    background: var(--wf-surface-2) !important;
    border-bottom: 1px solid var(--wf-border-1) !important;
}

.wiso_filterWindow--modern .wiso_window-footer {
    background: var(--wf-surface-3) !important;
    border-top: 1px solid var(--wf-border-1) !important;
}

.wiso_filterWindow--modern .wiso_window-content {
    background: var(--wf-surface-1) !important;
}


/* ============================================================
   POPUP / MODAL rounding (requested scoped)
   ============================================================ */

.wiso_popup,
.wiso_popup--window_modal {
    border-radius: 14px !important;
    overflow: hidden !important;
}


/* ============================================================
   INPUTS: Combo + Select containers (modern)
   ============================================================ */

/* Combobox Input Box */
.wiso_filterWindow--modern .wiso_combobox-input-box {
    border-radius: 10px !important;
    border: 1px solid var(--wf-border-1) !important;
    background: var(--wf-input-bg) !important;
    box-shadow: none !important;
}

/* Select Container */
.wiso_filterWindow--modern .wiso_input__container {
    border-radius: 10px !important;
    border: 1px solid var(--wf-border-1) !important;
    background: var(--wf-input-bg) !important;
    box-shadow: none !important;
}

    /* Focus rings */
    .wiso_filterWindow--modern .wiso_combobox-input-box:focus-within,
    .wiso_filterWindow--modern .wiso_input__container:focus-within {
        outline: 2px solid var(--wf-focus) !important;
        outline-offset: 2px !important;
    }


/* ============================================================
   SELECT: FINAL (copy & paste block to replace)
   - fixes double-arrow
   - styles select like inputs
   - styles dropdown popup (wiso/dhx popup list)
   ============================================================ */

/* 0) Hide possible extra icon rendered by WISO/DHTMLX next to select (double arrow) */
.wiso_popup .wiso_form-group .wiso_input__icon,
.wiso_popup--window_modal .wiso_form-group .wiso_input__icon,
.wiso_filterWindow--modern .wiso_form-group .wiso_input__icon {
    display: none !important;
}

/* 1) Remove native arrows across browsers */
.wiso_popup select.wiso_select,
.wiso_popup--window_modal select.wiso_select,
.wiso_filterWindow--modern select.wiso_select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none !important;
}

    /* 2) Styled select */
    .wiso_popup select.wiso_select.wiso_input,
    .wiso_popup--window_modal select.wiso_select.wiso_input,
    .wiso_filterWindow--modern select.wiso_select.wiso_input {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 34px 0 12px !important; /* space for arrow */
        border-radius: 10px !important;
        border: 1px solid var(--wf-border-1) !important;
        background-color: var(--wf-input-bg) !important;
        color: var(--wf-text-1) !important;
        font-size: 13px !important;
        line-height: 1 !important;
        letter-spacing: .2px !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* 3) Our single arrow as background-image */
    .wiso_popup select.wiso_select.wiso_input,
    .wiso_popup--window_modal select.wiso_select.wiso_input,
    .wiso_filterWindow--modern select.wiso_select.wiso_input {
        background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'>\
<path fill='rgba(0,0,0,0.55)' d='M7 10l5 5 5-5z'/>\
</svg>") !important;
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 16px 16px !important;
    }

/* In dark themes arrow should be light */
[data-wiso-theme="dark"] .wiso_popup select.wiso_select.wiso_input,
[data-wiso-theme="contrast-dark"] .wiso_popup select.wiso_select.wiso_input,
[data-wiso-theme="dark"] .wiso_popup--window_modal select.wiso_select.wiso_input,
[data-wiso-theme="contrast-dark"] .wiso_popup--window_modal select.wiso_select.wiso_input,
[data-wiso-theme="dark"] .wiso_filterWindow--modern select.wiso_select.wiso_input,
[data-wiso-theme="contrast-dark"] .wiso_filterWindow--modern select.wiso_select.wiso_input {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'>\
<path fill='rgba(255,255,255,0.65)' d='M7 10l5 5 5-5z'/>\
</svg>") !important;
}

/* 4) Hover */
.wiso_popup select.wiso_select.wiso_input:hover,
.wiso_popup--window_modal select.wiso_select.wiso_input:hover,
.wiso_filterWindow--modern select.wiso_select.wiso_input:hover {
    background-color: var(--wf-input-bg-hover) !important;
    border-color: var(--wf-border-2) !important;
}

/* 5) Focus (also when wiso_input--focus applied) */
.wiso_popup select.wiso_select.wiso_input:focus,
.wiso_popup select.wiso_select.wiso_input.wiso_input--focus,
.wiso_popup--window_modal select.wiso_select.wiso_input:focus,
.wiso_popup--window_modal select.wiso_select.wiso_input.wiso_input--focus,
.wiso_filterWindow--modern select.wiso_select.wiso_input:focus,
.wiso_filterWindow--modern select.wiso_select.wiso_input.wiso_input--focus {
    border-color: rgba(11,79,158,0.85) !important;
    box-shadow: 0 0 0 2px rgba(11,79,158,0.25) !important;
}

/* 6) Disabled */
.wiso_popup select.wiso_select.wiso_input:disabled,
.wiso_popup--window_modal select.wiso_select.wiso_input:disabled,
.wiso_filterWindow--modern select.wiso_select.wiso_input:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* 7) Dropdown popup (WISO/DHTMLX list)
   NOTE: native <option> styling is limited by browsers.
   DHTMLX/WISO often renders a popup list (div/ul). We style common classes.
*/
.wiso_popup .wiso_list,
.wiso_popup--window_modal .wiso_list,
.wiso_popup .wiso_combobox-popup,
.wiso_popup--window_modal .wiso_combobox-popup,
.wiso_popup .wiso_select__popup,
.wiso_popup--window_modal .wiso_select__popup {
    background: var(--wf-surface-2) !important;
    color: var(--wf-text-1) !important;
    border: 1px solid var(--wf-border-1) !important;
    border-radius: 12px !important;
    /*overflow: hidden !important;*/
    box-shadow: 0 10px 26px rgba(0,0,0,0.28) !important;
}

/* Items */
.wiso_popup .wiso_list-item,
.wiso_popup--window_modal .wiso_list-item,
.wiso_popup .wiso_list__item,
.wiso_popup--window_modal .wiso_list__item,
.wiso_popup .wiso_combobox-popup__item,
.wiso_popup--window_modal .wiso_combobox-popup__item {
    padding: 8px 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

[data-wiso-theme="light"] .wiso_popup .wiso_list-item,
[data-wiso-theme="contrast-light"] .wiso_popup .wiso_list-item,
[data-wiso-theme="light"] .wiso_popup--window_modal .wiso_list-item,
[data-wiso-theme="contrast-light"] .wiso_popup--window_modal .wiso_list-item,
[data-wiso-theme="light"] .wiso_popup .wiso_list__item,
[data-wiso-theme="contrast-light"] .wiso_popup .wiso_list__item,
[data-wiso-theme="light"] .wiso_popup--window_modal .wiso_list__item,
[data-wiso-theme="contrast-light"] .wiso_popup--window_modal .wiso_list__item {
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

.wiso_popup .wiso_list-item:hover,
.wiso_popup--window_modal .wiso_list-item:hover,
.wiso_popup .wiso_list__item:hover,
.wiso_popup--window_modal .wiso_list__item:hover,
.wiso_popup .wiso_combobox-popup__item:hover,
.wiso_popup--window_modal .wiso_combobox-popup__item:hover {
    background: rgba(11,79,158,0.12) !important;
}

.wiso_popup .wiso_list-item--selected,
.wiso_popup--window_modal .wiso_list-item--selected,
.wiso_popup .wiso_list__item--selected,
.wiso_popup--window_modal .wiso_list__item--selected {
    background: rgba(11,79,158,0.22) !important;
}


/* ============================================================
   + Button: modern (avoid old/duplicate look)
   ============================================================ */

/* Neutralize cell */
.wiso_filterWindow--modern .wiso_filterAddBtn.wiso_form-element {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Actual button */
.wiso_filterWindow--modern .wiso_filterAddBtn .wiso_button {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid var(--wf-border-1) !important;
    background: rgba(11,79,158,0.22) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color .14s ease, border-color .14s ease !important;
    box-shadow: none !important;
}

    .wiso_filterWindow--modern .wiso_filterAddBtn .wiso_button:hover {
        background: rgba(11,79,158,0.30) !important;
        border-color: var(--wf-border-2) !important;
    }

.wiso_filterWindow--modern .wiso_filterAddBtn .wiso_button__icon {
    font-size: 18px !important;
    line-height: 1 !important;
}


/* ============================================================
   Footer Buttons: modern
   ============================================================ */

.wiso_filterWindow--modern .wiso_filterFooterBtn .wiso_button {
    border-radius: 10px !important;
    border: 1px solid var(--wf-border-1) !important;
    background: var(--wf-input-bg) !important;
    color: var(--wf-text-1) !important;
    transition: background-color .14s ease, border-color .14s ease !important;
    box-shadow: none !important;
}

    .wiso_filterWindow--modern .wiso_filterFooterBtn .wiso_button:hover {
        background: var(--wf-input-bg-hover) !important;
        border-color: var(--wf-border-2) !important;
    }

.wiso_filterWindow--modern .wiso_filterFooterBtn--primary .wiso_button {
    background: rgba(11,79,158,0.22) !important;
    border-color: rgba(11,79,158,0.55) !important;
}

    .wiso_filterWindow--modern .wiso_filterFooterBtn--primary .wiso_button:hover {
        background: rgba(11,79,158,0.30) !important;
    }


/* ============================================================
   - Button: centered minus
   ============================================================ */

.wiso_filterRemoveBtn {
    width: 34px !important;
    height: 28px !important;
    border-radius: 10px !important;
    border: 1px solid var(--wf-border-1) !important;
    background: var(--wf-danger-bg) !important;
    color: var(--wf-text-1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

    .wiso_filterRemoveBtn i {
        font-size: 18px !important;
        line-height: 1 !important;
        display: block !important;
    }

    .wiso_filterRemoveBtn:hover {
        background: var(--wf-danger-bg-hover) !important;
        border-color: var(--wf-danger-border) !important;
    }


/* ============================================================
   Grid: rounding + borders
   ============================================================ */

.wiso_filterWindow--modern .wiso_filterGridHost {
    border-radius: 14px !important;
    overflow: hidden !important;
    width: 100% !important;
}

.wiso_filterWindow--modern .wiso_filtergrid--modern.wiso_grid {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--wf-border-1) !important;
    background: var(--wf-surface-1) !important;
}

.wiso_filterWindow--modern .wiso_filtergrid--modern .wiso_grid-content {
    border-radius: 14px !important;
    overflow: hidden !important;
}

.wiso_filterWindow--modern .wiso_filtergrid--modern .wiso_grid-header {
    background: var(--wf-surface-2) !important;
    border-bottom: 1px solid var(--wf-border-1) !important;
}

/* Optional: cells text color */
.wiso_filterWindow--modern .wiso_filtergrid--modern .wiso_grid-cell,
.wiso_filterWindow--modern .wiso_filtergrid--modern .wiso_grid-header-cell {
    color: var(--wf-text-1) !important;
}

/* ============================================================
   SELECT Dropdown (native <option>-Liste) – Dark/Light
   ------------------------------------------------------------
   Wichtig:
   - Native Select-Dropdowns sind browser-limitiert, aber in
     Chromium (Edge/Chrome) funktionieren diese Regeln gut.
   - Scope: nur Filter-Modern + Popup/Modal
   ============================================================ */

/* 1) Browser-Hint: welches Farbschema soll der native UI-Part nutzen? */
.wiso_filterWindow--modern select.wiso_select,
.wiso_popup select.wiso_select,
.wiso_popup--window_modal select.wiso_select {
    color-scheme: dark; /* Default in eurem Dark */
}

/* Light/Contrast-Light -> native Dropdown nicht dunkel rendern */
[data-wiso-theme="light"] .wiso_filterWindow--modern select.wiso_select,
[data-wiso-theme="contrast-light"] .wiso_filterWindow--modern select.wiso_select,
[data-wiso-theme="light"] .wiso_popup select.wiso_select,
[data-wiso-theme="contrast-light"] .wiso_popup select.wiso_select,
[data-wiso-theme="light"] .wiso_popup--window_modal select.wiso_select,
[data-wiso-theme="contrast-light"] .wiso_popup--window_modal select.wiso_select {
    color-scheme: light;
}

/* 2) Optionen/Listen-Hintergrund + Textfarben */
.wiso_filterWindow--modern select.wiso_select option,
.wiso_popup select.wiso_select option,
.wiso_popup--window_modal select.wiso_select option {
    background: var(--wf-surface-2);
    color: var(--wf-text-1);
}

    /* Disabled option */
    .wiso_filterWindow--modern select.wiso_select option:disabled,
    .wiso_popup select.wiso_select option:disabled,
    .wiso_popup--window_modal select.wiso_select option:disabled {
        color: rgba(255,255,255,0.45);
    }

/* Light disabled option */
[data-wiso-theme="light"] .wiso_filterWindow--modern select.wiso_select option:disabled,
[data-wiso-theme="contrast-light"] .wiso_filterWindow--modern select.wiso_select option:disabled,
[data-wiso-theme="light"] .wiso_popup select.wiso_select option:disabled,
[data-wiso-theme="contrast-light"] .wiso_popup select.wiso_select option:disabled,
[data-wiso-theme="light"] .wiso_popup--window_modal select.wiso_select option:disabled,
[data-wiso-theme="contrast-light"] .wiso_popup--window_modal select.wiso_select option:disabled {
    color: rgba(0,0,0,0.45);
}

/* Optgroup (falls vorhanden) */
.wiso_filterWindow--modern select.wiso_select optgroup,
.wiso_popup select.wiso_select optgroup,
.wiso_popup--window_modal select.wiso_select optgroup {
    background: var(--wf-surface-2);
    color: var(--wf-text-2);
}

/* 3) Optional: bessere Lesbarkeit/Spacing (Chromium) */
.wiso_filterWindow--modern select.wiso_select option,
.wiso_popup select.wiso_select option,
.wiso_popup--window_modal select.wiso_select option {
    padding: 8px 10px; /* wird nicht überall übernommen, in Chromium oft ja */
}

/* 4) Wenn der Dropdown trotzdem weiß bleibt:
      erzwinge explizit dark-Variante (Chromium-spezifisch hilft oft) */
[data-wiso-theme="dark"] .wiso_filterWindow--modern select.wiso_select option,
[data-wiso-theme="contrast-dark"] .wiso_filterWindow--modern select.wiso_select option,
[data-wiso-theme="dark"] .wiso_popup select.wiso_select option,
[data-wiso-theme="contrast-dark"] .wiso_popup select.wiso_select option,
[data-wiso-theme="dark"] .wiso_popup--window_modal select.wiso_select option,
[data-wiso-theme="contrast-dark"] .wiso_popup--window_modal select.wiso_select option {
    background-color: #111c33; /* var(--wf-surface-2) als hard fallback */
    color: rgba(255,255,255,0.92);
}
/* ==========================================
   WISO Select Popup – Dark / Light Fix
   ========================================== */

/* Popup-Hintergrund */
.wiso_popup .wiso_select__list {
    background-color: var(--wf-surface-1) !important;
    border: 1px solid var(--wf-border-1) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}

/* Optionen */
.wiso_popup .wiso_select__option {
    color: var(--wf-text-1) !important;
    padding: 8px 12px !important;
    border-radius: 6px;
}

    /* Hover */
    .wiso_popup .wiso_select__option:hover {
        background-color: var(--wf-surface-2) !important;
    }

/* Selected */
.wiso_popup .wiso_select__option--selected {
    background-color: rgba(11,79,158,0.35) !important;
    color: #fff !important;
}
/* ============================================================
   Date Input (combo_date) – Container/Wrapper neutralisieren
   ============================================================ */

/* Der Border/Background hängt oft am Container, nicht am Input */
.wiso_popup--window_modal.wiso_filterWindow--modern .wiso_form-group .wiso_input__container,
.wiso_popup.wiso_filterWindow--modern .wiso_form-group .wiso_input__container {
    border-radius: 10px !important;
    border: 1px solid var(--wf-border-1) !important;
    background: rgba(255,255,255,0.06) !important; /* wird unten thematisch ersetzt */
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Dark/Light Hintergrund sauber über Tokens */
.wiso_popup--window_modal.wiso_filterWindow--modern .wiso_form-group .wiso_input__container,
.wiso_popup.wiso_filterWindow--modern .wiso_form-group .wiso_input__container {
    background: color-mix(in srgb, var(--wf-surface-1) 72%, transparent) !important;
}

    /* Hover */
    .wiso_popup--window_modal.wiso_filterWindow--modern .wiso_form-group .wiso_input__container:hover,
    .wiso_popup.wiso_filterWindow--modern .wiso_form-group .wiso_input__container:hover {
        border-color: var(--wf-border-2) !important;
        background: color-mix(in srgb, var(--wf-surface-2) 68%, transparent) !important;
    }

/* ============================================================
   Date Input selbst (dein <input class="wiso_input ...">)
   ============================================================ */

.wiso_popup--window_modal.wiso_filterWindow--modern input.wiso_input[data-wiso-id="combo_date"],
.wiso_popup.wiso_filterWindow--modern input.wiso_input[data-wiso-id="combo_date"] {
    height: 36px !important;
    min-height: 36px !important;
    width: 100% !important;
    padding: 0 12px 0 12px !important;
    border: none !important; /* Border kommt vom Container */
    background: transparent !important;
    color: var(--wf-text-1) !important;
    font-size: 13px !important;
    letter-spacing: .2px !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 36px !important;
}

/* Platz links, wenn Icon im Container gerendert wird (wiso_input--icon-padding) */
.wiso_popup--window_modal.wiso_filterWindow--modern input.wiso_input.wiso_input--icon-padding[data-wiso-id="combo_date"],
.wiso_popup.wiso_filterWindow--modern input.wiso_input.wiso_input--icon-padding[data-wiso-id="combo_date"] {
    padding-left: 36px !important;
}

/* Placeholder */
.wiso_popup--window_modal.wiso_filterWindow--modern input.wiso_input[data-wiso-id="combo_date"]::placeholder,
.wiso_popup.wiso_filterWindow--modern input.wiso_input[data-wiso-id="combo_date"]::placeholder {
    color: var(--wf-text-2) !important;
    opacity: 1 !important;
}

/* Focus (dein Input bekommt .wiso_input--focus) -> Container highlight */
.wiso_popup--window_modal.wiso_filterWindow--modern input.wiso_input.wiso_input--focus[data-wiso-id="combo_date"],
.wiso_popup.wiso_filterWindow--modern input.wiso_input.wiso_input--focus[data-wiso-id="combo_date"],
.wiso_popup--window_modal.wiso_filterWindow--modern input.wiso_input[data-wiso-id="combo_date"]:focus,
.wiso_popup.wiso_filterWindow--modern input.wiso_input[data-wiso-id="combo_date"]:focus {
    outline: none !important;
}

/* Focus Ring am Container, weil dort die Optik sitzt */
.wiso_popup--window_modal.wiso_filterWindow--modern .wiso_form-group .wiso_input__container:focus-within,
.wiso_popup.wiso_filterWindow--modern .wiso_form-group .wiso_input__container:focus-within {
    border-color: color-mix(in srgb, var(--wf-accent) 70%, var(--wf-border-2)) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wf-accent) 35%, transparent) !important;
    background: color-mix(in srgb, var(--wf-surface-2) 74%, transparent) !important;
}

/* ============================================================
   Kalender-Icon links (dxi-calendar-today) – falls vorhanden
   ============================================================ */

.wiso_popup--window_modal.wiso_filterWindow--modern .wiso_input__icon.dxi,
.wiso_popup.wiso_filterWindow--modern .wiso_input__icon.dxi {
    width: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: color-mix(in srgb, var(--wf-text-2) 85%, transparent) !important;
    opacity: 0.95 !important;
}

/* Icon bei Hover/Focus etwas klarer */
.wiso_popup--window_modal.wiso_filterWindow--modern .wiso_form-group .wiso_input__container:hover .wiso_input__icon.dxi,
.wiso_popup.wiso_filterWindow--modern .wiso_form-group .wiso_input__container:hover .wiso_input__icon.dxi,
.wiso_popup--window_modal.wiso_filterWindow--modern .wiso_form-group .wiso_input__container:focus-within .wiso_input__icon.dxi,
.wiso_popup.wiso_filterWindow--modern .wiso_form-group .wiso_input__container:focus-within .wiso_input__icon.dxi {
    color: var(--wf-text-1) !important;
}
/* ============================================================
   WISO Filter Combo – Icon & Text perfekt zentriert
   ============================================================ */

.wiso_filterComboTpl {
    display: inline-flex;
    align-items: center; /* 🔥 vertikal mittig */
    gap: 8px;
    min-height: 24px; /* verhindert "Absacken" */
    line-height: 1.2;
    white-space: nowrap;
}

/* Icon */
.wiso_filterComboTpl__icon {
    width: 18px;
    height: 18px;
    display: block; /* ⛔ kein baseline-Offset */
    object-fit: contain;
    flex: 0 0 18px;
}

/* Text */
.wiso_filterComboTpl__text {
    display: inline-block;
    line-height: 1.2;
    vertical-align: middle;
}