/* ============================================================
   Tabbar-Header mit optionalen Actions (Buttons im Header)
   ============================================================ */

.wiso_tabbar-header--with-action {
    display: flex;
    align-items: center;
    gap: 6px;
    /* wichtig nach Re-Dock: nichts weg-clippen */
    overflow: visible;
    position: relative;
}

    /* Erstes Element (Tabs/Titel) soll Platz nehmen */
    .wiso_tabbar-header--with-action > *:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

/* ============================================================
   Action Button (Container für Icon)
   ============================================================ */

.wiso_tabbar-action-btn {
    width: 42px;
    height: 32px;
    /* ❗ NICHT mehr hier: margin-left:auto; (das war der Hauptkiller) */
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    /* kein "weg-flexen" */
    flex: 0 0 auto;
    /* nach Redock ggf. Overlay-Layer => nach vorn holen */
    position: relative;
    z-index: 3;
}

/* ✅ Nur der ERSTE Action-Button schiebt die Gruppe nach rechts */
.wiso_tabbar-header--with-action .wiso_tabbar-action-btn:first-of-type {
    margin-left: auto;
}

/* Hover / Press – ohne Bewegung */
.wiso_tabbar-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.wiso_tabbar-action-btn:active {
    background-color: rgba(0, 0, 0, 0.10);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}

/* Fokus nur bei Tastatur */
.wiso_tabbar-action-btn:focus-visible {
    outline: 2px solid var(--wiso-color-accent, #4c8bf5);
    outline-offset: 2px;
}

/* ============================================================
   Icon (Mask-Icon)
   ============================================================ */

.wiso_tabbar-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    /* Mask Setup */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
    -webkit-mask-position: center;
    mask-position: center;
    /* Sichtbare Farbe */
    background-color: var(--wiso-color-accent, #41A7E1);
    opacity: 0.85;
    pointer-events: none;
    background-repeat: no-repeat !important;
}

/* Hover → Icon klarer */
.wiso_tabbar-action-btn:hover .wiso_tabbar-icon {
    opacity: 1;
}

/* ============================================================
   Konkrete Icons
   ============================================================ */

.wiso_tabbar-icon.dock-window {
    -webkit-mask-image: url('../img/extended/icons-tabbar/dock-window.svg');
    mask-image: url('../img/extended/icons-tabbar/dock-window.svg');
}

.wiso_tabbar-icon.delete {
    -webkit-mask-image: url('../img/extended/icons-tabbar/file-document-remove-outline.svg');
    mask-image: url('../img/extended/icons-tabbar/file-document-remove-outline.svg');
}

.wiso_tabbar-icon.pause {
    -webkit-mask-image: url('../img/extended/icons-tabbar/pause-octagon-outline.svg');
    mask-image: url('../img/extended/icons-tabbar/pause-octagon-outline.svg');
}

.wiso_tabbar-icon.play {
    -webkit-mask-image: url('../img/extended/icons-tabbar/motion-play-outline.svg');
    mask-image: url('../img/extended/icons-tabbar/motion-play-outline.svg');
}
/* ============================================================
   Action Button – Plain / Static Variante (kleiner)
   ============================================================ */

.wiso_tabbar-action-btn--plain {
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 8px;
    /* keine Animation */
    transition: none;
}

    /* ✅ Plain muss auf DEIN Icon gehen (nicht wiso-nav-sub-icon) */
    .wiso_tabbar-action-btn--plain .wiso_tabbar-icon {
        width: 100%;
        height: 100%;
        -webkit-mask-size: contain;
        mask-size: contain;
        opacity: 0.85;
    }

    /* Hover / Press */
    .wiso_tabbar-action-btn--plain:hover {
        background-color: rgba(0, 0, 0, 0.06);
    }

    .wiso_tabbar-action-btn--plain:active {
        background-color: rgba(0, 0, 0, 0.12);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
    }

/* Header/Wrapper dürfen Actions nicht abschneiden */
.wiso_tabbar-header__wrapper,
.wiso_tabbar-header--with-action {
    overflow: visible !important;
}

/* Buttons immer über evtl. Header-Layer */
.wiso_tabbar-action-btn {
    position: relative;
    z-index: 5;
}
/* ========================================================================
   W6 – Scoped CSS für "Persistent Tab Content Pool" (Variante 1)
   ------------------------------------------------------------------------
   WICHTIG:
   - Dieses CSS wirkt NUR, wenn du der Tabbar (Root-Element) zusätzlich die
     Klasse  .w6_tabbar-persistent-scope  gibst.
   - Damit zerschießt es keine anderen Tabbars.

   Erwartete DOM-Struktur (vereinfacht):
   .w6_tabbar-persistent-scope
     .wiso_tabbar-header__wrapper / .wiso_tabbar__header
     .wiso_tabbar__content / .dhx_tabbar__content
       (native tab-content-... wird von Tabbar erzeugt)
       .w6_tabbar-persistent-pool   <-- unser Pool (absolute fill)
         .w6_tabbar-persistent-host <-- pro Tab 1 Host (absolute fill)
   ======================================================================== */


/* ------------------------------------------------------------------------
   1) Host im Window / Container sauber auf 100% + Flex
   (Optional, aber hilft genau gegen "Toolbar über Header" / Höhenfehler)
   -> Setze diese Klasse auf den Window-Content-Host, z.B. div.w6-tl-tabbar-host
   ------------------------------------------------------------------------ */
.w6-tl-tabbar-host {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* ------------------------------------------------------------------------
   2) Tabbar Root (scoped) als Flex-Column, Header bleibt oben, Content füllt Rest
   ------------------------------------------------------------------------ */
.w6_tabbar-persistent-scope {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; /* Basis für z-index / children */
}

    /* Header darf NICHT überdeckt werden */
    .w6_tabbar-persistent-scope .wiso_tabbar-header__wrapper,
    .w6_tabbar-persistent-scope .wiso_tabbar-header,
    .w6_tabbar-persistent-scope .wiso_tabbar__header,
    .w6_tabbar-persistent-scope .dhx_tabbar-header,
    .w6_tabbar-persistent-scope .dhx_tabbar__header {
        flex: 0 0 auto;
        position: relative;
        z-index: 10; /* Header immer über Content/Pool */
    }


    /* ------------------------------------------------------------------------
   3) Der echte Content-Bereich muss flex:1 bekommen + relative + overflow hidden
   ------------------------------------------------------------------------ */
    .w6_tabbar-persistent-scope .wiso_tabbar__content,
    .w6_tabbar-persistent-scope .wiso_tabbar-content,
    .w6_tabbar-persistent-scope .wiso_tabbar-body,
    .w6_tabbar-persistent-scope .dhx_tabbar__content,
    .w6_tabbar-persistent-scope .dhx_tabbar-content,
    .w6_tabbar-persistent-scope .dhx_tabbar-body {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        height: auto; /* wichtig: NICHT 100%, sonst kann es den Header überlagern */
        position: relative; /* Pool kann hier drin absolut füllen */
        overflow: hidden;
        z-index: 1;
    }


    /* ------------------------------------------------------------------------
   4) Pool: liegt IM Content-Bereich, füllt ihn, aber liegt UNTER dem Header
   ------------------------------------------------------------------------ */
    .w6_tabbar-persistent-scope .w6_tabbar-persistent-pool {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        z-index: 2; /* unter Header (10), über "native content" */
        pointer-events: auto;
    }


    /* ------------------------------------------------------------------------
   5) Pro Tab ein Host: absolute fill, wird per JS display:block/none geschaltet
   ------------------------------------------------------------------------ */
    .w6_tabbar-persistent-scope .w6_tabbar-persistent-host {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        /* Default: versteckt, JS schaltet aktiv auf block/flex */
        display: none;
    }

        /* Wenn du (wie im Screenshot) inline auf flex-column setzt, passt das.
   Optionaler Helper, falls du später lieber per Klasse schaltest: */
        .w6_tabbar-persistent-scope .w6_tabbar-persistent-host.is-active {
            display: flex;
            flex-direction: column;
        }


    /* ------------------------------------------------------------------------
   6) Native (von Tabbar generierte) Tab-Content-Container NICHT anzeigen
      -> Wichtig: NUR scoped, sonst zerschießt es andere Tabbar-Instanzen.
   ------------------------------------------------------------------------ */
    .w6_tabbar-persistent-scope [id^="tab-content-"],
    .w6_tabbar-persistent-scope [class^="tab-content-"],
    .w6_tabbar-persistent-scope .wiso_tabbar__tab-content,
    .w6_tabbar-persistent-scope .wiso_tabbar-tab-content,
    .w6_tabbar-persistent-scope .dhx_tabbar__tab-content {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }


    /* ------------------------------------------------------------------------
   7) ACE Editor Container darf in Flex sauber wachsen (gegen "nur 1 Zeile sichtbar")
   ------------------------------------------------------------------------ */
    .w6_tabbar-persistent-scope .w6_tabbar-persistent-host .ace_editor {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    /* Optional: wenn deine Editor-mount Struktur ein editorDiv benutzt */
    .w6_tabbar-persistent-scope .w6_tabbar-persistent-host > div {
        min-height: 0;
    }


    /* ------------------------------------------------------------------------
   8) Safety: Resizer/Footers (falls Tabbar intern sowas erzeugt) nicht aufblähen
   ------------------------------------------------------------------------ */
    .w6_tabbar-persistent-scope [data-cell-id="resizers"],
    .w6_tabbar-persistent-scope .resizers {
        flex: 0 0 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }