/* ============================================================
   W6 TOOLBAR – FINAL (nur .w6-toolbar)
   Themes: light / contrast-light / dark / contrast-dark
   ============================================================ */

/* ---------- Theme Tokens (per html[data-wiso-theme]) ---------- */
html[data-wiso-theme="dark"] nav.w6-toolbar,
html[data-wiso-theme="contrast-dark"] nav.w6-toolbar {
    --w6tb-bg: black;
    --w6tb-text: #ffffff;
    --w6tb-btn: rgba(0,0,0,.20);
    --w6tb-hover: #0b4f9e;
    --w6tb-active: #41A7E1;
    --w6tb-border: rgba(255,255,255,.10);
    --w6tb-shadow: inset 0 -1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.45);
    --w6tb-warn: #F49519;
    --w6tb-warn-text: #000;
    --w6tb-radius: 14px;
    --w6tb-btn-radius: 10px;
    --w6tb-btn-h: 34px;
    --w6tb-gap: 6px;
}

html[data-wiso-theme="light"] nav.w6-toolbar,
html[data-wiso-theme="contrast-light"] nav.w6-toolbar {
    --w6tb-bg: #f4f6fb;
    --w6tb-text: #1b2430;
    --w6tb-btn: #ffffff;
    --w6tb-hover: #0b4f9e;
    --w6tb-active: #0b4f9e;
    --w6tb-border: rgba(27,36,48,.14);
    --w6tb-shadow: inset 0 -1px 0 rgba(27,36,48,.08), 0 10px 22px rgba(0,0,0,.10);
    --w6tb-warn: #F49519;
    --w6tb-warn-text: #000;
    --w6tb-radius: 14px;
    --w6tb-btn-radius: 10px;
    --w6tb-btn-h: 34px;
    --w6tb-gap: 6px;
}

/* ============================================================
   Toolbar Container
   1) oben links/rechts abrunden
   ============================================================ */
nav.w6-toolbar {
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    background: var(--w6tb-bg) !important;
    color: var(--w6tb-text) !important;
    box-shadow: var(--w6tb-shadow) !important;
    border-top-left-radius: var(--w6tb-radius) !important;
    border-top-right-radius: var(--w6tb-radius) !important;
    /* wichtig: Popup Menüs dürfen nicht abgeschnitten werden */
    overflow: visible !important;
}

    /* UL / Navbar */
    nav.w6-toolbar > ul.wiso_navbar {
        display: flex !important;
        align-items: center !important;
        gap: var(--w6tb-gap) !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* Items */
    nav.w6-toolbar li.wiso_toolbar__item {
        display: flex !important;
        align-items: center !important;
    }

    /* Spacer */
    nav.w6-toolbar li.wiso_toolbar__item--spacer {
        flex: 1 1 auto !important;
    }

    /* ============================================================
   Button Basis
   ============================================================ */
    nav.w6-toolbar button.wiso_button,
    nav.w6-toolbar button.wiso_toolbar-button,
    nav.w6-toolbar button.wiso_nav-menu-button {
        height: var(--w6tb-btn-h) !important;
        padding: 0 12px !important;
        border: 1px solid var(--w6tb-border) !important;
        border-radius: var(--w6tb-btn-radius) !important;
        background: var(--w6tb-btn) !important;
        color: var(--w6tb-text) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: .02em !important;
        cursor: pointer !important;
        user-select: none !important;
        transition: background-color .14s ease, box-shadow .14s ease, transform .08s ease !important;
    }

    /* Icons in Toolbar */
    nav.w6-toolbar .wiso_toolbar-button__icon,
    nav.w6-toolbar .wiso_menu-button__icon,
    nav.w6-toolbar .wiso_button__icon {
        font-size: 16px !important;
        opacity: .95 !important;
    }

    /* Text */
    nav.w6-toolbar .wiso_toolbar-button__text,
    nav.w6-toolbar .wiso_nav-menu-button__text {
        white-space: nowrap !important;
    }

    /* ============================================================
   3) ICON-ONLY Buttons: NICHT rund (kein Kreis)
   - übersteuert wiso_button--circle & toolbar-button--icon
   ============================================================ */
    nav.w6-toolbar button.wiso_toolbar-button--icon,
    nav.w6-toolbar button.wiso_button--circle,
    nav.w6-toolbar button.wiso_button--icon {
        width: var(--w6tb-btn-h) !important;
        padding: 0 !important;
        justify-content: center !important;
        /* kein Kreis! */
        border-radius: var(--w6tb-btn-radius) !important;
    }

    /* 3) Avatar/Image-Button ebenfalls NICHT rund */
    nav.w6-toolbar button.wiso_toolbar-button-image {
        width: var(--w6tb-btn-h) !important;
        padding: 0 !important;
        border-radius: var(--w6tb-btn-radius) !important;
    }

    nav.w6-toolbar .wiso_toolbar-button-image__image {
        width: 28px !important;
        height: 28px !important;
        /* nicht rund */
        border-radius: 8px !important;
        background-size: cover !important;
        background-position: center !important;
        display: inline-block !important;
    }

    /* ============================================================
   4) mehr Platz für größere IMG Icons in HTML-Buttons
   ============================================================ */
    nav.w6-toolbar button .wiso_toolbar-button__html {
        display: inline-flex !important;
        align-items: center !important;
    }

        nav.w6-toolbar button .wiso_toolbar-button__html img {
            height: 18px !important;
            max-height: 26px !important;
            width: auto !important;
            margin-right: 6px !important;
            vertical-align: middle !important;
        }

    /* ============================================================
   Hover / Press (einheitlich)
   ============================================================ */
    nav.w6-toolbar button.wiso_button:hover,
    nav.w6-toolbar button.wiso_toolbar-button:hover,
    nav.w6-toolbar button.wiso_nav-menu-button:hover {
        background: var(--w6tb-hover) !important;
        color: #fff !important;
        box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12) !important;
        transform: translateY(-1px) !important;
    }

    nav.w6-toolbar button.wiso_button:active,
    nav.w6-toolbar button.wiso_toolbar-button:active,
    nav.w6-toolbar button.wiso_nav-menu-button:active {
        transform: translateY(0) !important;
        box-shadow: inset 0 3px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.25) !important;
    }

    /* Active / Expanded */
    nav.w6-toolbar button.wiso_toolbar-button--active,
    nav.w6-toolbar button.wiso_nav-menu-button--active,
    nav.w6-toolbar button.wiso_nav-menu-button[aria-expanded="true"] {
        background: var(--w6tb-active) !important;
        color: #fff !important;
    }

    /* Stop/Close Warn */
    nav.w6-toolbar button[data-wiso-id="stop"]:hover,
    nav.w6-toolbar button[data-wiso-id="close"]:hover {
        background: var(--w6tb-warn) !important;
        color: var(--w6tb-warn-text) !important;
    }

    /* Disabled */
    nav.w6-toolbar button[aria-disabled="true"],
    nav.w6-toolbar button:disabled {
        opacity: .45 !important;
        pointer-events: none !important;
    }

    /* ============================================================
   5) DROPDOWN MENU-BUTTON NUR über .w6-menu-btn stylen
   -> betrifft nur den einen Button (Umsatz 202x)
   ============================================================ */
    nav.w6-toolbar li.w6-menu-btn > button.wiso_nav-menu-button {
        /* optisch „menu“: etwas breiter + links padding */
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

/* ============================================================
   Popup Menü (nur optisch abrunden, KEINE Hover-Fallen)
   - WICHTIG: NICHT global auf .wiso_menu wirken!
   ============================================================ */
div.wiso_menu--popup-menu,
div.wiso-menu--popup-menu,
div.wiso_menu-popup-menu,
div.wiso_menu__popup {
    border-radius: 12px !important;
}

/* dein Popup ist: <ul class="wiso_widget wiso_menu" style="position:absolute; ...">
   -> NUR optisch, keine Positions/Pointer-Regeln überschreiben */
ul.wiso_widget.wiso_menu {
    border-radius: 12px !important;
}

    /* Items im Popup-Menü: nur minimal, damit nichts „verschwindet“ */
    ul.wiso_widget.wiso_menu > li.wiso_menu-item > button.wiso_menu-button {
        border-radius: 10px !important;
    }
/* ============================================================
   W6 TOOLBAR – PLAIN BUTTONS
   Klasse: .w6-plain-btn
   - keine Farbe
   - kein Kreis
   - nur leichtes Anheben
   ============================================================ */

/* Basis: Button selbst */
nav.w6-toolbar .w6-plain-btn > button {
    background: transparent !important;
    border-radius: 8px !important; /* weich, aber kein Kreis */
    box-shadow: none !important;
    padding: 0 !important;
    transition: transform .12s ease, box-shadow .12s ease;
}

    /* Hover: NUR anheben */
    nav.w6-toolbar .w6-plain-btn > button:hover {
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(-2px);
    }

    /* Active: minimal zurück */
    nav.w6-toolbar .w6-plain-btn > button:active {
        transform: translateY(0);
    }

/* ------------------------------------------------------------
   WICHTIG: Icon-Wrapper NIEMALS einkreisen
   ------------------------------------------------------------ */

/* Standard Icons */
nav.w6-toolbar .w6-plain-btn span.wiso_toolbar-button__icon,
nav.w6-toolbar .w6-plain-btn span.wiso_button__icon,
nav.w6-toolbar .w6-plain-btn span.wiso-nav-icon {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Hover darf auch hier NICHT färben */
nav.w6-toolbar .w6-plain-btn > button:hover
span.wiso_toolbar-button__icon,
nav.w6-toolbar .w6-plain-btn > button:hover
span.wiso_button__icon,
nav.w6-toolbar .w6-plain-btn > button:hover
span.wiso-nav-icon {
    background: transparent !important;
}

/* ------------------------------------------------------------
   Image Buttons (PNG / Avatar / große Icons)
   ------------------------------------------------------------ */

nav.w6-toolbar .w6-plain-btn img,
nav.w6-toolbar .w6-plain-btn .wiso_toolbar-button-image__image {
    border-radius: 6px !important; /* leicht weich, kein Kreis */
    box-shadow: none !important;
}

/* Avatar explizit NICHT einkreisen */
nav.w6-toolbar .w6-plain-btn .wiso_toolbar-button-image__image {
    outline: none !important;
}
/* ============================================================
   W6 PLAIN SVG BUTTON (Toolbar Icon-Only)
   Klasse am BUTTON:  <button class="... w6-plain-svg-btn">
   - kein Kreis
   - kein Hover-Farbwechsel
   - nur leicht anheben
   - wiso-nav-icon (Favorites/SVG) bleibt sichtbar
   ============================================================ */

/* Button selbst */
nav.w6-toolbar button.w6-plain-svg-btn {
    /* reset gegen DHTMLX circle/icon defaults */
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important; /* NICHT rund (kein Kreis) */
    box-shadow: none !important;
    height: 34px !important;
    min-width: 34px !important;
    width: 34px !important; /* icon-only -> feste Breite */
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important; /* nie clippen */
    line-height: 1 !important;
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease;
}

    /* Hover: nur anheben (keine Farbe) */
    nav.w6-toolbar button.w6-plain-svg-btn:hover {
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(-2px);
    }

    /* Active: zurück */
    nav.w6-toolbar button.w6-plain-svg-btn:active {
        transform: translateY(0);
    }

    /* Fokus (optional, aber nützlich) */
    nav.w6-toolbar button.w6-plain-svg-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(11, 79, 158, .55); /* W6 Blau */
        border-radius: 10px;
    }

    /* ------------------------------------------------------------
   ICONS: zwei Fälle
   1) MDI / Font-Icon: <span class="mdi ... wiso_toolbar-button__icon">
   2) SVG/Background-Icon: <span class="wiso-nav-icon ...">
   ------------------------------------------------------------ */

    /* 1) Font/Icon (mdi) */
    nav.w6-toolbar button.w6-plain-svg-btn .wiso_toolbar-button__icon,
    nav.w6-toolbar button.w6-plain-svg-btn .wiso_button__icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 18px; /* darf größer sein */
        line-height: 1 !important;
        overflow: visible !important;
    }

    /* 2) wiso-nav-icon (Favorites etc.) -> braucht feste Box, sonst "verschwindet" es */
    nav.w6-toolbar button.w6-plain-svg-btn .wiso-nav-icon {
        display: inline-block !important;
        width: 48px !important;
        height: 48px !important;
        /* wenn per background-image kommt */
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        /* wenn per mask kommt */
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        overflow: visible !important;
    }

    /* Falls ein echtes <svg> im Button steckt */
    nav.w6-toolbar button.w6-plain-svg-btn svg {
        display: block;
        width: 48px;
        height: 48px;
        overflow: visible !important;
    }
/* ============================================================
   W6 PLAIN SVG / IMAGE BUTTON
   Gilt für:
   - SVG / wiso-nav-icon
   - Avatar / wiso_toolbar-button-image
   ============================================================ */

/* Button-Grundlage */
nav.w6-toolbar .w6-plain-svg-btn > button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 34px !important;
    min-width: 34px !important;
    width: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border-radius: 10px !important; /* kein Kreis */

    transition: transform .12s ease !important;
}

    /* Hover: NUR anheben – KEINE Farbe */
    nav.w6-toolbar .w6-plain-svg-btn > button:hover {
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
        transform: translateY(-2px);
    }

    /* Active: zurück */
    nav.w6-toolbar .w6-plain-svg-btn > button:active {
        transform: translateY(0);
    }

    /* Focus (optional, keyboard only) */
    nav.w6-toolbar .w6-plain-svg-btn > button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(11, 79, 158, .45);
    }

/* ------------------------------------------------------------
   IMAGE BUTTON (Avatar)
   ------------------------------------------------------------ */
nav.w6-toolbar .w6-plain-svg-btn .wiso_toolbar-button-image__image {
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px; /* Avatar bleibt rund */
    background-size: cover !important;
    background-position: center !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible !important;
}

/* Hover darf KEINE visuelle Änderung am Bild machen */
nav.w6-toolbar .w6-plain-svg-btn:hover .wiso_toolbar-button-image__image {
    filter: none !important;
    box-shadow: none !important;
}

/* ------------------------------------------------------------
   SVG / Favorites / wiso-nav-icon
   ------------------------------------------------------------ */
nav.w6-toolbar .w6-plain-svg-btn .wiso-nav-icon,
nav.w6-toolbar .w6-plain-svg-btn svg {
    width: 22px !important;
    height: 22px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: none !important;
    opacity: 1 !important;
    overflow: visible !important;
}