/* ============================================================
   WISO Toolbar – CustomHTML Buttons (edel) mit Themes
   ------------------------------------------------------------
   Themes:
   - [data-wiso-theme="light"]
   - [data-wiso-theme="dark"]
   - [data-wiso-theme="contrast-light"]
   - [data-wiso-theme="contrast-dark"]
   ------------------------------------------------------------
   Prinzip:
   - Basis nutzt CSS-Variablen (Tokens) -> 1x Styling, Themes setzen nur Variablen
   - Toggle ist vollständig theme-ready (Track/Thumb/ON-State)
   ============================================================ */


/* ============================================================
   TOKENS (Fallback / Defaults)
   - werden per Theme überschrieben
   ============================================================ */

.wiso_tb_item {
    display: flex;
    align-items: center;
    /* Fallback Tokens (wenn kein data-wiso-theme vorhanden) */
    --wiso-tb-bg: rgba(255,255,255,0.06);
    --wiso-tb-bg-hover: rgba(255,255,255,0.10);
    --wiso-tb-bg-active: rgba(255,255,255,0.12);
    --wiso-tb-border: rgba(255,255,255,0.10);
    --wiso-tb-border-hover: rgba(255,255,255,0.14);
    --wiso-tb-text: rgba(255,255,255,0.88);
    --wiso-tb-text-muted: rgba(255,255,255,0.78);
    --wiso-tb-focus: rgba(11,79,158,0.65);
    --wiso-tb-accent: rgba(11,79,158,0.95);
    --wiso-tb-danger-border: rgba(255,80,80,0.18);
    --wiso-tb-danger-bg-hover: rgba(255,80,80,0.10);
    --wiso-tb-danger-border-hover: rgba(255,80,80,0.22);
    --wiso-tb-badge-border: rgba(0,0,0,0.35);
    --wiso-tb-badge-bg: rgba(11,79,158,0.95);
    --wiso-tb-badge-text: #fff;
    --wiso-tb-avatar-ring: rgba(255,255,255,0.18);
    /* Toggle */
    --wiso-tb-toggle-track: rgba(255,255,255,0.14);
    --wiso-tb-toggle-track-shadow: rgba(0,0,0,0.18);
    --wiso-tb-toggle-thumb: rgba(255,255,255,0.92);
    --wiso-tb-toggle-on: rgba(11,79,158,0.70);
}


/* ============================================================
   BASE: Buttons
   ============================================================ */

.wiso_tb_btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--wiso-tb-border);
    background: var(--wiso-tb-bg);
    color: var(--wiso-tb-text);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
    transform: translateZ(0);
}

.wiso_tb_btn--circle {
    width: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
}

.wiso_tb__icon {
    font-size: 18px;
    line-height: 1;
    opacity: .95;
    color: var(--wiso-tb-text-muted);
}

.wiso_tb__text {
    font-size: 13px;
    line-height: 1;
    letter-spacing: .2px;
    white-space: nowrap;
    opacity: .92;
    color: var(--wiso-tb-text);
}

/* Hover: leichte Farbänderung, kein Bewegen */
.wiso_tb_btn:hover {
    background: var(--wiso-tb-bg-hover);
    border-color: var(--wiso-tb-border-hover);
}

.wiso_tb_btn:active {
    background: var(--wiso-tb-bg-active);
}

.wiso_tb_btn:focus-visible {
    outline: 2px solid var(--wiso-tb-focus);
    outline-offset: 2px;
}

/* Danger (Close) */
.wiso_tb_btn--danger {
    border-color: var(--wiso-tb-danger-border);
}

    .wiso_tb_btn--danger:hover {
        background: var(--wiso-tb-danger-bg-hover);
        border-color: var(--wiso-tb-danger-border-hover);
    }

/* Badge */
.wiso_tb__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 1px solid var(--wiso-tb-badge-border);
    background: var(--wiso-tb-badge-bg);
    color: var(--wiso-tb-badge-text);
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

/* Avatar */
.wiso_tb_btn--avatar {
    overflow: hidden;
}

.wiso_tb__avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px var(--wiso-tb-avatar-ring) inset;
}


/* ============================================================
   BASE: Toggle (edel, kompakt, kein Layout shift) – READY
   - reagiert auf data-state="1" UND aria-pressed="true"
   ============================================================ */

.wiso_tb_toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--wiso-tb-border);
    background: var(--wiso-tb-bg);
    color: var(--wiso-tb-text);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color .14s ease, border-color .14s ease;
}

    .wiso_tb_toggle:hover {
        background: var(--wiso-tb-bg-hover);
        border-color: var(--wiso-tb-border-hover);
    }

    .wiso_tb_toggle:focus-visible {
        outline: 2px solid var(--wiso-tb-focus);
        outline-offset: 2px;
    }

.wiso_tb_toggle__label {
    font-size: 13px;
    letter-spacing: .2px;
    opacity: .92;
    white-space: nowrap;
    color: var(--wiso-tb-text);
}

/* Track */
.wiso_tb_toggle .wiso_tb_toggle__track {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: var(--wiso-tb-toggle-track);
    box-shadow: 0 0 0 1px var(--wiso-tb-toggle-track-shadow) inset;
    flex: 0 0 auto;
    transition: background-color .16s ease, box-shadow .16s ease;
}

/* Thumb */
.wiso_tb_toggle .wiso_tb_toggle__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--wiso-tb-toggle-thumb);
    transition: transform .16s ease, background-color .16s ease;
    will-change: transform;
}

/* =========================================
   OFF STATE (Default)
========================================= */

button.wiso_tb_toggle[data-state="0"] .wiso_tb_toggle__track,
button.wiso_tb_toggle[aria-pressed="false"] .wiso_tb_toggle__track {
    background: var(--wiso-tb-toggle-off, #444) !important;
}

button.wiso_tb_toggle[data-state="0"] .wiso_tb_toggle__thumb,
button.wiso_tb_toggle[aria-pressed="false"] .wiso_tb_toggle__thumb {
    transform: translateX(0px) !important;
    background: #fff;
}


/* =========================================
   ON STATE
========================================= */

button.wiso_tb_toggle[data-state="1"] .wiso_tb_toggle__track,
button.wiso_tb_toggle[aria-pressed="true"] .wiso_tb_toggle__track {
    background: var(--wiso-tb-toggle-on, #22c55e) !important;
}

button.wiso_tb_toggle[data-state="1"] .wiso_tb_toggle__thumb,
button.wiso_tb_toggle[aria-pressed="true"] .wiso_tb_toggle__thumb {
    transform: translateX(16px) !important;
    background: #fff;
}


/* ============================================================
   THEMES: setzten NUR Variablen
   ============================================================ */

/* ---------- LIGHT ---------- */
[data-wiso-theme="light"] .wiso_tb_item {
    --wiso-tb-bg: #eef2f7; /* surface-1 */
    --wiso-tb-bg-hover: #e5eaf2; /* surface-2 */
    --wiso-tb-bg-active: #dde5f1;
    --wiso-tb-border: #cbd5e1; /* border-1 */
    --wiso-tb-border-hover: rgba(11,79,158,0.55);
    --wiso-tb-text: #0b1220; /* text-1 */
    --wiso-tb-text-muted: #334155; /* text-2 */
    --wiso-tb-focus: rgba(11,79,158,0.65);
    --wiso-tb-accent: rgba(11,79,158,0.95);
    --wiso-tb-danger-border: rgba(220,40,40,0.22);
    --wiso-tb-danger-bg-hover: rgba(220,40,40,0.08);
    --wiso-tb-danger-border-hover: rgba(220,40,40,0.28);
    --wiso-tb-badge-border: rgba(255,255,255,0.65);
    --wiso-tb-badge-bg: rgba(11,79,158,0.95);
    --wiso-tb-badge-text: #fff;
    --wiso-tb-avatar-ring: rgba(0,0,0,0.10);
    --wiso-tb-toggle-track: rgba(0,0,0,0.10);
    --wiso-tb-toggle-track-shadow: rgba(0,0,0,0.12);
    --wiso-tb-toggle-thumb: rgba(255,255,255,0.96);
    --wiso-tb-toggle-on: rgba(11,79,158,0.78);
}


/* ---------- DARK ---------- */
[data-wiso-theme="dark"] .wiso_tb_item {
    --wiso-tb-bg: rgba(255,255,255,0.06);
    --wiso-tb-bg-hover: rgba(255,255,255,0.10);
    --wiso-tb-bg-active: rgba(255,255,255,0.12);
    --wiso-tb-border: rgba(255,255,255,0.10);
    --wiso-tb-border-hover: rgba(255,255,255,0.14);
    --wiso-tb-text: rgba(255,255,255,0.90);
    --wiso-tb-text-muted: rgba(255,255,255,0.80);
    --wiso-tb-focus: rgba(11,79,158,0.65);
    --wiso-tb-danger-border: rgba(255,80,80,0.22);
    --wiso-tb-danger-bg-hover: rgba(255,80,80,0.12);
    --wiso-tb-danger-border-hover: rgba(255,80,80,0.28);
    --wiso-tb-badge-border: rgba(0,0,0,0.45);
    --wiso-tb-badge-bg: rgba(11,79,158,0.95);
    --wiso-tb-badge-text: #fff;
    --wiso-tb-avatar-ring: rgba(255,255,255,0.18);
    --wiso-tb-toggle-track: rgba(255,255,255,0.14);
    --wiso-tb-toggle-track-shadow: rgba(0,0,0,0.22);
    --wiso-tb-toggle-thumb: rgba(255,255,255,0.92);
    --wiso-tb-toggle-on: rgba(11,79,158,0.70);
}


/* ---------- CONTRAST-LIGHT ---------- */
[data-wiso-theme="contrast-light"] .wiso_tb_item {
    --wiso-tb-bg: rgba(0,0,0,0.04);
    --wiso-tb-bg-hover: rgba(0,0,0,0.06);
    --wiso-tb-bg-active: rgba(0,0,0,0.08);
    --wiso-tb-border: rgba(0,0,0,0.10);
    --wiso-tb-border-hover: rgba(0,0,0,0.14);
    --wiso-tb-text: rgba(0,0,0,0.82);
    --wiso-tb-text-muted: rgba(0,0,0,0.68);
    --wiso-tb-focus: rgba(11,79,158,0.55);
    --wiso-tb-danger-border: rgba(220,40,40,0.22);
    --wiso-tb-danger-bg-hover: rgba(220,40,40,0.08);
    --wiso-tb-danger-border-hover: rgba(220,40,40,0.28);
    --wiso-tb-badge-border: rgba(255,255,255,0.65);
    --wiso-tb-badge-bg: rgba(11,79,158,0.95);
    --wiso-tb-badge-text: #fff;
    --wiso-tb-avatar-ring: rgba(0,0,0,0.10);
    --wiso-tb-toggle-track: rgba(0,0,0,0.10);
    --wiso-tb-toggle-track-shadow: rgba(0,0,0,0.12);
    --wiso-tb-toggle-thumb: rgba(255,255,255,0.96);
    --wiso-tb-toggle-on: rgba(11,79,158,0.78);
}


/* ---------- CONTRAST-DARK ---------- */
[data-wiso-theme="contrast-dark"] .wiso_tb_item {
    --wiso-tb-bg: rgba(255,255,255,0.08);
    --wiso-tb-bg-hover: rgba(255,255,255,0.12);
    --wiso-tb-bg-active: rgba(255,255,255,0.14);
    --wiso-tb-border: rgba(255,255,255,0.16);
    --wiso-tb-border-hover: rgba(255,255,255,0.22);
    --wiso-tb-text: rgba(255,255,255,0.92);
    --wiso-tb-text-muted: rgba(255,255,255,0.82);
    --wiso-tb-focus: rgba(11,79,158,0.72);
    --wiso-tb-danger-border: rgba(255,80,80,0.26);
    --wiso-tb-danger-bg-hover: rgba(255,80,80,0.14);
    --wiso-tb-danger-border-hover: rgba(255,80,80,0.32);
    --wiso-tb-badge-border: rgba(0,0,0,0.55);
    --wiso-tb-badge-bg: rgba(11,79,158,0.95);
    --wiso-tb-badge-text: #fff;
    --wiso-tb-avatar-ring: rgba(255,255,255,0.22);
    --wiso-tb-toggle-track: rgba(255,255,255,0.18);
    --wiso-tb-toggle-track-shadow: rgba(0,0,0,0.28);
    --wiso-tb-toggle-thumb: rgba(255,255,255,0.94);
    --wiso-tb-toggle-on: rgba(11,79,158,0.72);
}

/* Icons */
.w6-menue .wiso_toolbar-button__icon {
    /*font-size: 16px;*/
    opacity: .95;
}

.w6-menue .wiso_toolbar-button__caret {
    /*font-size: 14px;*/
    opacity: .7;
}
/* ============================================================
   W6 MENU – Items dediziert über: li.wiso_menu-item.w6-menue
   Farben: #2d3039 #3f4350 #0b4f9e #F49519 #fff #000
   Keine Umrandung der Items
   ============================================================ */
    /* Das LI selbst: nur Hitbox/Stacking */
    li .wiso_menu-item.w6-menue {
    position: relative;
    z-index: 1;
    pointer-events: auto; /* wichtig, falls irgendwo pointer-events sabotiert */
}

    /* Der eigentliche klickbare Button im LI */
        li.wiso_menu-item.w6-menue > button.wiso_menu-button {
            width: 100%;
            display: flex;
            align-items: center;
            height: 34px;
            padding: 0 12px;
            border-radius: 10px;
            background: transparent;
            color: #ffffff;
            border: 0 !important;
            box-shadow: none !important;
            cursor: pointer;
            user-select: none;
            /*font-size: 12.5px;
            font-weight: 600;
            letter-spacing: .02em;
                 */
            /* ganz wichtig: klickbar halten */
            pointer-events: auto;
            transition: background-color .10s ease, color .10s ease;
        }

        /* Hover */
        li.wiso_menu-item.w6-menue > button.wiso_menu-button:hover {
            background: #3f4350;
        }

        /* Active (optional: falls DHTMLX active class setzt) */
        li.wiso_menu-item.w6-menue.is-active > button.wiso_menu-button,
        li.wiso_menu-item.w6-menue > button.wiso_menu-button.is-active {
            background: #0b4f9e;
        }

    /* Inhalt links sauber ausrichten */
    li.wiso_menu-item.w6-menue .wiso_menu-button__block {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Icon */
    li.wiso_menu-item.w6-menue .wiso_menu-button__icon {
        font-size: 16px;
        line-height: 1;
        opacity: .95;
    }

    /* Text */
    li.wiso_menu-item.w6-menue .wiso_menu-button__text {
        font-size: 12.5px;
        white-space: nowrap;
    }

    /* Disabled */
    li.wiso_menu-item.w6-menue > button.wiso_menu-button[aria-disabled="true"] {
        opacity: .45;
        cursor: default;
        pointer-events: none;
    }

    /* "Delete" als Danger (nur wenn data-wiso-id=delete) */
    li.wiso_menu-item.w6-menue > button.wiso_menu-button[data-wiso-id="delete"]:hover {
        background: #F49519;
        color: #000000;
    }
/* ============================================================
   W6 MENU – Subcontainer abrunden
   greift NUR für Menüs mit .w6-menue Items
   ============================================================ */

ul.wiso_menu:has(> li.wiso_menu-item.w6-menue) {
    border-radius: 14px; /* weich, aber nicht „pill“ */
    padding: 6px; /* etwas Luft zum Rand */
    background: #2d3039; /* W6 dunkel */
    /* sanfter Card-Look */
    box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden; /* wichtig: rundet auch Hover-Flächen */
}
/* ============================================================
   W6 MENU – Toolbar Input abrunden
   NUR Border-Radius, sonst nichts anfassen
   ============================================================ */

/* äußerer Toolbar-Item Wrapper */
li.wiso_toolbar__item.w6-menue {
    border-radius: 10px;
}

    /* Form-Group / Input-Wrapper */
    li.wiso_toolbar__item.w6-menue .wiso_form-group,
    li.wiso_toolbar__item.w6-menue .wiso_input__wrapper {
        border-radius: 10px;
    }

    /* Das eigentliche Input */
    li.wiso_toolbar__item.w6-menue input.wiso_input {
        border-radius: 10px;
    }

    /* Icon-Wrapper (damit nichts „eckig durchsticht“) */
    li.wiso_toolbar__item.w6-menue .wiso_input__icon {
        border-radius: 8px;
    }
/* ============================================================
   W6 MENU – SelectButton soll IDENTISCH zu .wiso_tb_btn sein
   (nur Variablen / Tokens)
   Voraussetzung: Toolbar-Item hat .wiso_tb_item (siehe JSON Fix)
   ============================================================ */

.w6-menue.wiso_toolbar-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    /* wie .wiso_tb_btn */
    border: 1px solid var(--wiso-tb-border);
    background: var(--wiso-tb-bg);
    color: var(--wiso-tb-text);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color .14s ease, border-color .14s ease;
    transform: translateZ(0);
}

    .w6-menue.wiso_toolbar-button:hover {
        background: var(--wiso-tb-bg-hover);
        border-color: var(--wiso-tb-border-hover);
    }

    /* geöffnet = active */
    .w6-menue.wiso_toolbar-button[aria-expanded="true"],
    .w6-menue.wiso_toolbar-button.wiso_toolbar-button--active {
        background: var(--wiso-tb-bg-active);
        border-color: var(--wiso-tb-border-hover);
    }

    /* Icon/Text exakt wie deine Toolbar-Buttons */
    .w6-menue.wiso_toolbar-button .wiso_toolbar-button__icon {
        font-size: 18px;
        line-height: 1;
        opacity: .95;
        color: var(--wiso-tb-text-muted);
    }

    .w6-menue.wiso_toolbar-button .wiso_toolbar-button__text {
        font-size: 13px;
        line-height: 1;
        letter-spacing: .2px;
        white-space: nowrap;
        opacity: .92;
        color: var(--wiso-tb-text);
    }

    .w6-menue.wiso_toolbar-button .wiso_toolbar-button__caret {
        opacity: .7;
        color: var(--wiso-tb-text-muted);
    }