/* === Combined skin: wiso-wf-pipes-skin + scoped wf-state === */
 /* ============================================================
   WF Pipes UI – Modern “Panel” Skin (scoped override for WISO)
   ------------------------------------------------------------
   Usage:
     1) Load THIS css AFTER wiso.css
     2) Wrap only pipe components (tabbar + grids) with:
          <div class="wf-pipes-skin wf-theme--dark"> ... </div>
        or:
          <div class="wf-pipes-skin wf-theme--light-contrast"> ... </div>

   Goals:
     - Overrides only inside .wf-pipes-skin
     - Modern panel layout (tabs as pills, cleaner grids)
     - Supports runtime theme switching (dark ↔ light-contrast)
   ============================================================ */
/* ============================================================
   0) Scope Container + Shared Layout Tokens
   ------------------------------------------------------------
   These tokens control geometry and “structure”.
   Colors are set per theme below.
   ============================================================ */
html, body {
    width: 100%;
    height: 100%;
    margin: 0; /* <- Default 8px killen */
    padding: 0;
    overflow: hidden; /* <- Scrollbar am iframe-body verhindern */
    box-sizing: border-box;
}

/* gegen +1px overflow durch borders/padding */
*, *::before, *::after {
    box-sizing: border-box;
}

.wf-pipes-skin {
    /* geometry */
    --wf-radius-lg: 14px;
    --wf-radius-md: 10px;
    --wf-radius-sm: 8px;
    --wf-shadow-1: 0 8px 24px rgba(0,0,0,0.25);
    --wf-shadow-2: 0 2px 10px rgba(0,0,0,0.25);
    --wf-tab-h: 40px;
    --wf-tab-pad-x: 14px;
    --wf-grid-row-h: 34px;
    --wf-grid-header-h: 38px;
    /* pipe column header (custom html header inside grid header cell) */
    --wf-colhdr-h: 78px; /* actual header height for pipe grid columns */
    --wf-badge-w: 86px; /* fixed width for status badge */
    --wf-alias-w: 320px; /* optional clamp for alias */
    --wf-text-w: 520px; /* optional clamp for text */
    /* panel wrapper */
    border-radius: var(--wf-radius-lg);
    box-shadow: var(--wf-shadow-1);
    overflow: hidden; /* important for rounded corners on tabbar/grid */
    /*Wf rows colors and borders */
    --wf-row-run-bd: rgb(244,149,25);
    --wf-row-run-bg: rgba(244,149,25,0.5);
    --wf-row-run-co: rgb(244,149,25);
    --wf-row-pend-bd: rgb(244,149,25);
    --wf-row-pend-bg: rgba(244,149,25,0.5);
    --wf-row-pend-co: rgb(244,149,25);
    --wf-row-wait-bd: rgb(244,149,25);
    --wf-row-wait-bg: rgba(244,149,25,0.5);
    --wf-row-wait-co: rgb(244,149,25);
    --wf-row-done-bd: rgb(0, 192, 96);
    --wf-row-done-bg: rgba(0, 192, 96,0.5);
    --wf-row-done-co: rgb(0, 192, 96);
    --wf-row-err-bd: rgb(255, 59, 48);
    --wf-row-err-bg: rgba(255, 59, 48,0.5);
    --wf-row-err-co: rgb(255, 59, 48);
}


    /* ============================================================
   1) THEME TOKENS
   ------------------------------------------------------------
   We define internal WF theme tokens first.
   Then we map them to WISO CSS vars within the scope.
   ============================================================ */

    /* ---------- 1A) Dark and Dark-Contrast (WISO colors) ---------- */
[data-wiso-theme=dark] .wf-pipes-skin,
[data-wiso-theme=contrast-dark] .wf-pipes-skin {
    /* surfaces (WISO palette) */
    --wf-surface-1: #2d3039; /* panel bg */
    --wf-surface-2: #000000; /* header / tabs bg */
    --wf-surface-3: #3f4350; /* grid bg / content area */
    /* text */
    --wf-text-1: rgba(255,255,255,0.92);
    --wf-text-2: rgba(255,255,255,0.72);
    --wf-text-3: rgba(255,255,255,0.56);
    /* borders */
    --wf-border: rgba(255,255,255,0.10);
    --wf-border-strong: rgba(255,255,255,0.16);
    /* accents (WISO) */
    --wf-accent: #41A7E1; /* light blue */
    --wf-accent-strong: #0b4f9e; /* dark blue */
    --wf-warn: #F49519;
    --wf-danger: #000000; /* your error badge uses black + orange text */
    --wf-ok: #41A7E1; /* keep neutral; badges are explicit below */
    /* row flow highlight (neutral brightening) */
    --wf-row-active-bg: rgba(255,255,255,0.06);
    --wf-row-active-brd: rgba(255,255,255,0.08);
    --wf-row-error-bg: rgba(255,255,255,0.04);
    --wf-row-error-brd: rgba(255,255,255,0.06);
    /*buttons colors*/
    --wf-button-bg-1: rgba(60,60,59,0.035);
    /*Wf rows colors and borders */
    --wf-row-idle-bd: rgb(168,169,172);
    --wf-row-idle-bg: rgba(0,0,0,1);
    --wf-row-idle-co: rgba(255,255,255,1);
    --wf-row-run-bd: rgb(244,149,25);
    --wf-row-run-bg: rgba(244,149,25,0.5);
    --wf-row-run-co: rgb(244,149,25);
    --wf-row-pend-bd: rgb(244,149,25);
    --wf-row-pend-bg: rgba(244,149,25,0.5);
    --wf-row-pend-co: rgb(244,149,25);
    --wf-row-wait-bd: rgb(244,149,25);
    --wf-row-wait-bg: rgba(244,149,25,0.5);
    --wf-row-wait-co: rgb(244,149,25);
    --wf-row-done-bd: rgb(0, 192, 96);
    --wf-row-done-bg: rgba(0, 192, 96,0.5);
    --wf-row-done-co: rgb(0, 192, 96);
    --wf-row-err-bd: rgb(255, 59, 48);
    --wf-row-err-bg: rgba(255, 59, 48,0.5);
    --wf-row-err-co: rgb(255, 59, 48);
    /*scrollbar*/
    --wf-scrollbar-color: #2a3550 #0b1326;
}

    /* ---------- 1B) Light and Light-Contrast ---------- */
[data-wiso-theme=light] .wf-pipes-skin,
[data-wiso-theme=contrast-light] .wf-pipes-skin {
    /* surfaces: bright but “technical”, not washed-out */
    --wf-surface-1: #f4f6fb; /* panel bg */
    --wf-surface-2: #ffffff; /* header / tabs bg */
    --wf-surface-3: #eef2f8; /* content bg */
    /* text: dark with strong readability */
    --wf-text-1: rgba(10,14,20,0.92);
    --wf-text-2: rgba(10,14,20,0.72);
    --wf-text-3: rgba(10,14,20,0.56);
    /* borders: darker than typical light theme (contrast!) */
    --wf-border: rgba(65,167,225,.22); /*rgba(10,14,20,0.14);*/
    --wf-border-strong: rgba(60,60,59,0.22);
    /* accents (same brand colors, just behave well on white) */
    --wf-accent: #0b4f9e;
    --wf-accent-strong: #41A7E1;
    --wf-warn: #F49519;
    --wf-danger: #000000;
    --wf-ok: #0b4f9e;
    /* row flow highlight: subtle dark ink */
    --wf-row-active-bg: rgba(10,14,20,0.05);
    --wf-row-active-brd: rgba(10,14,20,0.10);
    --wf-row-error-bg: rgba(10,14,20,0.035);
    --wf-row-error-brd: rgba(10,14,20,0.09);
    /* shadows in light mode should be softer */
    --wf-shadow-1: 0 10px 26px rgba(10,14,20,0.12);
    --wf-shadow-2: 0 2px 10px rgba(10,14,20,0.10);
    /*buttons colors*/
    --wf-button-bg-1: rgba(11,79,158,0.35);
    /*Wf rows colors and borders */
    --wf-row-idle-bd: rgb(65,167,225);
    --wf-row-idle-bg: rgba(65,167,225,0.5);
    --wf-row-idle-co: rgba(11,79,158,1) --wf-row-run-bd: rgb(244,149,25);
    --wf-row-run-bg: rgba(244,149,25,0.5);
    --wf-row-run-co: rgb(244,149,25);
    --wf-row-pend-bd: rgb(244,149,25);
    --wf-row-pend-bg: rgba(244,149,25,0.5);
    --wf-row-pend-co: rgb(244,149,25);
    --wf-row-wait-bd: rgb(244,149,25);
    --wf-row-wait-bg: rgba(244,149,25,0.5);
    --wf-row-wait-co: rgb(244,149,25);
    --wf-row-done-bd: rgb(0, 192, 96);
    --wf-row-done-bg: rgba(0, 192, 96,0.5);
    --wf-row-done-co: rgb(0, 192, 96);
    --wf-row-err-bd: rgb(255, 59, 48);
    --wf-row-err-bg: rgba(255, 59, 48,0.5);
    --wf-row-err-co: rgb(255, 59, 48);
    /*scrollbar*/
    --wf-scrollbar-color: #b7c0cf #f3f5f9;
}


/* ============================================================
   2) Map WF Tokens -> WISO Variables (scoped)
   ------------------------------------------------------------
   This is the core: we override WISO design vars ONLY here.
   ============================================================ */



    /* ============================================================
   3) TABBAR – pills + clean header
   ============================================================ */

.wf-pipes-skin .wiso_grid-body {
    overflow: auto;
    border: 1px solid black !important;
}
    .wf-pipes-skin .wiso_tabbar {
        background-color: transparent;
    }

    .wf-pipes-skin .wiso_tabbar--top .wiso_tabbar-header__wrapper {
        background: var(--wf-surface-3);
        border-bottom: 1px solid var(--wf-border);
        padding: 8px 10px;
    }

    .wf-pipes-skin .wiso_tabbar-header-active {
        height: 2px !important;
        background-color: transparent !important;
    }

    .wf-pipes-skin .wiso_tabbar-tab {
        margin: 12px 6px 0 12px;
    }

    /* pill buttons */
    .wf-pipes-skin .wiso_tabbar-tab-button {
        height: var(--wf-tab-h);
        padding: 0 var(--wf-tab-pad-x);
        border-radius: 999px;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 600;
        color: var(--wf-text-2);
        background: color-mix(in srgb, var(--wf-text-1) 6%, transparent);
        border: 1px solid color-mix(in srgb, var(--wf-text-1) 10%, transparent);
        transition: transform .08s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
    }

        .wf-pipes-skin .wiso_tabbar-tab-button:hover {
            background: color-mix(in srgb, var(--wf-text-1) 10%, transparent);
            border-color: color-mix(in srgb, var(--wf-text-1) 18%, transparent);
            color: var(--wf-text-1);
        }

        .wf-pipes-skin .wiso_tabbar-tab-button:active {
            transform: translateY(1px);
        }

    .wf-pipes-skin .wiso_tabbar-tab-button--active {
        background: color-mix(in srgb, var(--wf-accent) 18%, color-mix(in srgb, var(--wf-text-1) 6%, transparent));
        border-color: color-mix(in srgb, var(--wf-accent) 55%, color-mix(in srgb, var(--wf-text-1) 18%, transparent));
        color: var(--wf-text-1);
        box-shadow: var(--wf-shadow-2);
    }

        .wf-pipes-skin .wiso_tabbar-tab-button .wiso_button__text,
        .wf-pipes-skin .wiso_tabbar-tab-button--active .wiso_button__text {
            opacity: 1;
        }

    .wf-pipes-skin .wiso_tabbar_scroll.arrow-left,
    .wf-pipes-skin .wiso_tabbar_scroll.arrow-right {
        background: transparent !important;
    }

    .wf-pipes-skin .wiso_tabbar .wiso_layout-cell--content {
        background: var(--wf-surface-3);
        padding: 10px;
    }


    /* ============================================================
   4) GRID – modern, compact, readable
   ============================================================ */

    .wf-pipes-skin .wiso_grid {
        background: transparent;
    }

    .wf-pipes-skin .wiso_grid-content {
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-lg);
        background: var(--wf-surface-1);
        overflow: hidden;
    }

    /* grid header */
    .wf-pipes-skin .wiso_grid-header-cell {
        background-color: var(--wf-surface-2) !important;
        color: var(--wf-text-1);
        border-bottom: 1px solid var(--wf-border);
        border-top: none;
        font-weight: 700;
    }

    /* IMPORTANT: pipe column header is custom html -> needs full height */
    .wf-pipes-skin .wiso_grid-header-cell {
        height: var(--wf-colhdr-h) !important;
        padding: 0 !important;
        vertical-align: top;
    }

    /* make header html occupy full cell */
    .wf-pipes-skin .wiso_grid-header-text {
        display: flex !important;
        align-items: stretch;
        width: 100%;
        height: 100%;
        padding: 0 !important;
    }

    /* grid rows/cells */
    .wf-pipes-skin .wiso_grid-row {
        height: var(--wf-grid-row-h);
    }

    .wf-pipes-skin .wiso_grid-cell {
        height: var(--wf-grid-row-h);
        padding: 0 12px;
        border-top: 1px solid color-mix(in srgb, var(--wf-text-1) 8%, transparent);
        border-left: 1px solid color-mix(in srgb, var(--wf-text-1) 8%, transparent);
        color: var(--wf-text-1);
        background: transparent;
    }

        .wf-pipes-skin .wiso_grid-cell:first-child {
            border-left: none;
        }

    /* zebra */
    .wf-pipes-skin .wiso_grid-row:nth-child(even) .wiso_grid-cell {
        background: color-mix(in srgb, var(--wf-text-1) 3%, transparent);
    }

    /* hover */
    .wf-pipes-skin .wiso_grid-row:hover .wiso_grid-cell {
        background: color-mix(in srgb, var(--wf-text-1) 7%, transparent);
    }

    /* selection */
    .wf-pipes-skin .wiso_grid-selected-row {
        border-left: 3px solid var(--wf-accent);
    }

        .wf-pipes-skin .wiso_grid-selected-row:after {
            opacity: 0.10;
        }

    /* footer */
    .wf-pipes-skin .wiso_grid-footer {
        background: var(--wf-surface-2);
        border-top: 1px solid var(--wf-border);
    }

    .wf-pipes-skin .wiso_grid-footer-cell {
        padding: 0 12px;
        height: var(--wf-grid-header-h);
        background: var(--wf-surface-2);
        color: var(--wf-text-2);
    }


    /* ============================================================
   5) Pipe Column Header Layout (title + actions to the right)
   ------------------------------------------------------------
   This matches your HTML header layout:
     .wf-colhdr > .wf-colhdr__row
        left: .wf-colhdr__titleWrap (title+meta)
        right: .wf-colhdr__actions (toggle+button)
   ============================================================ */

/* Zusätzlicher Abstand oberhalb des Einzelschrittmodus */
.wf-pipes-skin .wf-procRow--toggle {
    margin-top: 10px;
}

    .wf-pipes-skin .wf-colhdr {
        width: 100%;
        height: 100%;
        padding: 8px 10px;
        box-sizing: border-box;
        color:var(--wf-text-1);
    }

    .wf-pipes-skin .wf-colhdr__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        height: 100%;
    }

    .wf-pipes-skin .wf-colhdr__titleWrap {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .wf-pipes-skin .wf-colhdr__title {
        font-weight: 800;
        font-size: 13px;
        color: var(--wf-text-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wf-pipes-skin .wf-colhdr__meta {
        font-size: 11px;
        color: var(--wf-text-1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .wf-pipes-skin .wf-colhdr__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    /* smaller switch in header (you already have wf-switch) */
    .wf-pipes-skin .wf-switch--sm {
        transform: scale(.92);
        transform-origin: right center;
    }

    /* step button small */
    .wf-pipes-skin .wf-btn--xs {
        height: 30px;
        padding: 0 12px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 12px;
    }

    .wf-pipes-skin .wf-btn--step {
        background: color-mix(in srgb, var(--wf-text-1) 6%, transparent);
        border: 1px solid color-mix(in srgb, var(--wf-text-1) 14%, transparent);
        color: color-mix(in srgb, var(--wf-text-1) 92%, transparent);
    }

        .wf-pipes-skin .wf-btn--step:hover {
            background: color-mix(in srgb, var(--wf-text-1) 10%, transparent);
            border-color: color-mix(in srgb, var(--wf-text-1) 18%, transparent);
        }


   



    /* ============================================================
   8) Workflow Flow Highlight on Row (NO COLOR, only brighter)
   ------------------------------------------------------------
   Badge stays colored; row becomes “slightly brighter”.
   ============================================================ */

    .wf-pipes-skin .wf-row--active {
        background-color: var(--wf-row-active-bg);
        box-shadow: inset 0 0 0 1px var(--wf-row-active-brd);
    }

    .wf-pipes-skin .wf-row--error {
        background-color: var(--wf-row-error-bg);
        box-shadow: inset 0 0 0 1px var(--wf-row-error-brd);
    }

    .wf-pipes-skin .wf-row--idle,
    .wf-pipes-skin .wf-row--done {
        background: transparent;
        box-shadow: none;
        opacity: 0.75;
    }


  
/* === Scoped legacy wf-state styles (from wf-pipes-skin.css) === */

/* ============================================================
   W6 Pipes UI – Modern “Panel” Skin (scoped override for WISINI)
   ------------------------------------------------------------
   Usage:
     1) Load THIS css AFTER wiso.css
     2) Wrap nur die Pipe-Komponenten (Tabbar + Grids) in:
          <div class="wf-pipes-skin"> ... tabbar/grid ... </div>

   Ziel:
     - Überschreibt WISINI-Styles nur innerhalb .wf-pipes-skin
     - Modernes, .wf-pipes-skin ruhiges Panel-Layout (Tabs wie Pills, Grid cleaner)
   ============================================================ */

/* -----------------------------
   1) Override WISINI variables (nur im Scope)
   ----------------------------- */
/* -----------------------------
   2) Tabbar – “Pill Tabs” + cleaner Header
   (Klassen aus wiso.css: .wiso_tabbar, .wf-pipes-skin .wiso_tabbar-header__wrapper, .wf-pipes-skin .wiso_tabbar-tab-button, ...)
   ----------------------------- */
    .wf-pipes-skin .wiso_tabbar {
        background-color: transparent; /* kommt aus Scope-Container */
       
    }
/* Headerzeile als “Toolbar” */
    .wf-pipes-skin .wiso_tabbar--top .wiso_tabbar-header__wrapper {
        background: red;
        border-bottom: 1px solid var(--wf-border);
        padding: 8px 10px;
    }
.wf-pipes-skin .wiso_tabbar-header__wrapper {
    display: flex;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    background-color: var(--wf-surface-3);
}

/* Active underline bar dezent (oder aus) */
    .wf-pipes-skin .wiso_tabbar-header-active {
        height: 2px !important;
        background-color: transparent !important; /* wir machen active über Button */
    }
/* Tabs enger und als Pills */
    .wf-pipes-skin .wiso_tabbar-tab {
        margin: 12px 6px 0 12px;
    }
/* Button Styling */
    .wf-pipes-skin .wiso_tabbar-tab-button {
        height: var(--wf-tab-h);
        padding: 0 var(--wf-tab-pad-x);
        border-radius: 999px;
        text-transform: none; /* weg mit uppercase */
        letter-spacing: 0;
        font-weight: 600;
        color: var(--wf-text-2);
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        transition: transform .08s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
    }
.wf-pipes-skin .wiso_tabbar-tab-button:hover {
            background: rgba(255,255,255,0.07);
            border-color: rgba(255,255,255,0.14);
            color: var(--wf-text-1);
        }
.wf-pipes-skin .wiso_tabbar-tab-button:active {
            transform: translateY(1px);
        }
/* Active tab */
    .wf-pipes-skin .wiso_tabbar-tab-button--active {
        background: color-mix(in srgb, var(--wf-accent) 18%, rgba(255,255,255,0.06));
        border-color: color-mix(in srgb, var(--wf-accent) 55%, rgba(255,255,255,0.14));
        color: var(--wf-text-1);
        box-shadow: var(--wf-shadow-2);
    }
.wf-pipes-skin .wiso_tabbar-tab-button--active .wiso_button__text {
            opacity: 1; /* wiso.css dämpft sonst */
        }
.wf-pipes-skin .wiso_tabbar-tab-button .wiso_button__text {
        opacity: 1; /* generell klare Lesbarkeit */
    }
/* Scroll-Arrows beim Tabbar (falls viele Tabs) */
    .wf-pipes-skin .wiso_tabbar_scroll.arrow-left, .wf-pipes-skin .wiso_tabbar_scroll.arrow-right {
        background: transparent !important;
    }
/* Content area */
    .wf-pipes-skin .wiso_tabbar .wiso_layout-cell--content {
        background: var(--wf-surface-3);
        padding: 10px;
    }
/* -----------------------------
   3) Grid – modern, .wf-pipes-skin ruhiger, .wf-pipes-skin kompakter
   (Klassen aus wiso.css: .wiso_grid, .wf-pipes-skin .wiso_grid-content, .wf-pipes-skin .wiso_grid-header-cell, .wf-pipes-skin .wiso_grid-cell, ...)
   ----------------------------- */
    .wf-pipes-skin .wiso_grid {
        background: transparent;
    }
/* Grid Rahmen / Fläche */
    .wf-pipes-skin .wiso_grid-content {
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-lg);
        background: var(--wf-surface-1);
        overflow: hidden;
    }
/* Header */
    .wf-pipes-skin .wiso_grid-header-cell {
        height: var(--wf-grid-header-h);
        background-color: var(--wf-surface-2) !important;
        color: var(--wf-text-1);
        border-bottom: 1px solid var(--wf-border);
        border-top: none;
        font-weight: 700;
        padding: 0 12px;
    }
/* Sort Icon sichtbarer */
    .wf-pipes-skin .wiso_grid-sort-icon {
        opacity: 0.8;
    }
.wf-pipes-skin .wiso_grid-header-cell--sortable:hover .wiso_grid-sort-icon {
        opacity: 1;
    }
/* Rows / Cells */
    .wf-pipes-skin .wiso_grid-row {
        height: var(--wf-grid-row-h);
    }
.wf-pipes-skin .wiso_grid-cell {
        height: var(--wf-grid-row-h);
        padding: 0 12px;
        border-top: 1px solid rgba(255,255,255,0.06);
        border-left: 1px solid rgba(255,255,255,0.06);
        color: var(--wf-text-1);
        background: transparent;
    }
/* erste Zelle ohne left border (wiso macht das teilweise – wir sichern es) */
        .wf-pipes-skin .wiso_grid-cell:first-child {
            border-left: none;
        }
/* Zebra */
    .wf-pipes-skin .wiso_grid-row:nth-child(even) .wiso_grid-cell {
        background: rgba(255,255,255,0.02);
    }
/* Hover (nur optisch, keine “riesigen” overlays) */
    .wf-pipes-skin .wiso_grid-row:hover .wiso_grid-cell {
        background: rgba(255,255,255,0.05);
    }
/* Selection: schöner Rahmen + leichter Fill (wiso nutzt overlay – wir verstärken dezent) */
    .wf-pipes-skin .wiso_grid-selected-row {
        border-left: 3px solid var(--wf-accent);
    }
.wf-pipes-skin .wiso_grid-selected-row:after {
            opacity: 0.10; /* wiso default ~0.08 */
        }
/* Footer (falls genutzt) */
    .wf-pipes-skin .wiso_grid-footer {
        background: var(--wf-surface-2);
        border-top: 1px solid var(--wf-border);
    }
.wf-pipes-skin .wiso_grid-footer-cell {
        padding: 0 12px;
        height: var(--wf-grid-header-h);
        background: var(--wf-surface-2);
        color: var(--wf-text-2);
    }
/* Inputs/Editors im Grid */
    .wf-pipes-skin .wiso_cell-editor {
        color: var(--wf-text-1);
    }
/* -----------------------------
   4) Kleine “Status Chips” (optional)
   Wenn du in Zellen z.B. <span class="wf-chip wf-chip--ok">RUN</span> renderst
   ----------------------------- */
    .wf-pipes-skin .wf-chip {
        display: inline-flex;
        align-items: center;
        height: 22px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.2px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.04);
        color: var(--wf-text-1);
    }
.wf-pipes-skin .wf-chip--ok {
        border-color: color-mix(in srgb, var(--wf-ok) 55%, rgba(255,255,255,0.15));
        background: color-mix(in srgb, var(--wf-ok) 14%, rgba(255,255,255,0.04));
    }
.wf-pipes-skin .wf-chip--warn {
        border-color: color-mix(in srgb, var(--wf-warn) 60%, rgba(255,255,255,0.15));
        background: color-mix(in srgb, var(--wf-warn) 14%, rgba(255,255,255,0.04));
        color: rgba(255,255,255,0.92);
    }
.wf-pipes-skin .wf-chip--bad {
        border-color: color-mix(in srgb, var(--wf-danger) 60%, rgba(255,255,255,0.15));
        background: color-mix(in srgb, var(--wf-danger) 14%, rgba(255,255,255,0.04));
    }
/* -----------------------------
   5) “Panel Spacing” Helpers (optional)
   ----------------------------- */
    .wf-pipes-skin .wf-pipes-toolbar {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 10px;
        background: var(--wf-surface-2);
        border-bottom: 1px solid var(--wf-border);
    }
.wf-pipes-skin .wf-pipes-toolbar .wf-title {
            font-weight: 800;
            color: var(--wf-text-1);
        }
.wf-pipes-skin .wf-pipes-toolbar .wf-sub {
            color: var(--wf-text-3);
        }
/* --- Pipe Column Header (höher + Layout) --- */
    .wf-pipes-skin .wf-colhdr {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 10px;
        min-height: var(--wf-colhdr-h); /* Header-Höhe */
        height: var(--wf-colhdr-h);
        align-items: center;
    }
.wf-pipes-skin .wf-colhdr__top {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
.wf-pipes-skin .wf-colhdr__title {
    font-weight: 800;
    font-size: 13px;
    color: var(--wf-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wf-pipes-skin .wf-colhdr__meta {
    font-size: 11px;
    color: var(--wf-text-1);
}
.wf-pipes-skin .wf-colhdr__actions {
        display: flex;
        gap: 10px;
        align-items: center;
    }
/* kleiner Switch im Header (nutzt deinen wf-switch) */
    .wf-pipes-skin .wf-switch--sm {
        transform: scale(0.92);
        transform-origin: left center;
    }
/* Step Button klein */
    .wf-pipes-skin .wf-btn--xs {
        height: 30px;
        padding: 0 12px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 12px;
    }
.wf-pipes-skin .wf-btn--step {
        background: var(--wf-button-bg-1);
        border: 1px solid var(--wf-border);
        color: var(--wf-text-1);
    }
    .wf-pipes-skin .wf-btn--step:hover {
        background: rgb(11,79,158);
        border-color: var(--wf-border-strong);
    }
/* Grid Header höher (wiso header cell) */
    .wf-pipes-skin .wiso_grid-header-cell {
        height: 78px !important; /* höher, damit der HTML-Header reinpasst */
        padding: 0 !important; /* wir paddings im wf-colhdr */
        vertical-align: top;
    }
.wf-pipes-skin .loggrid .wiso_grid-header-cell {
    height: 42px !important; /* höher, damit der HTML-Header reinpasst */
    padding: 10px !important; 
    vertical-align: top;
}
/* --- Row styling (Status elegant) --- */
    .wf-pipes-skin .wf-row {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;

    }
.wf-pipes-skin .wf-row__main {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
.wf-pipes-skin .wf-row__alias {
        font-weight: 750;
        font-size: 12px;
        color: rgba(255,255,255,0.92);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
.wf-pipes-skin .wf-row__text {
        font-size: 11px;
        color: rgba(255,255,255,0.60);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* 🔥 DAS ist der entscheidende Fix */
    .wf-pipes-skin .wiso_grid-header-text {
        display: flex !important;
        align-items: stretch;
        width: 100%;
        height: 100%;
        padding: 0 !important;
    }
.wf-pipes-skin .wf-colhdr {
        width: 100%;
        height: 100%;
        padding: 8px 10px;
        box-sizing: border-box;
    }
.wf-pipes-skin .wf-colhdr__row {
        display: flex;
        align-items: center;
        justify-content: space-between; /* 🔥 */
        gap: 10px;
        width: 100%;
        height: 100%;
    }
.wf-pipes-skin .wf-colhdr__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0; /* 🔥 wichtig */
    }
.wf-pipes-skin .wf-colhdr__titleWrap {
        min-width: 0;
    }
/*
    .wf-pipes-skin .wiso_grid-header, .wf-pipes-skin .wiso_grid-header-cell, .wf-pipes-skin .wiso_grid-cell__content {
        min-height: var(--wf-header-h);
        height: var(--wf-header-h);
        box-sizing: border-box;
    }
/* nur Rows-Container nach unten */

.wf-pipes-skin .wiso_grid_data {
    padding-top: 38px;
    height: calc(100% - 38px); /* statt fixer 300px */
    overflow: hidden; /* oder overflow:auto, wenn nur rows scrollen sollen */
}

.wf-pipes-skin .loggrid .wiso_grid_data {
    padding-top: 0px;
    height: 100%;
}
/* ====== Pipes Grid Row Look ====== */
    .wf-pipes-skin .wf-row {
        display: flex;
        align-items: center;
        gap: 10px;
        /* verhindert vertikales “wackeln” */
        line-height: 22px;
        min-height: 26px;
        /* optional: etwas padding fürs “elegante” feeling */
        padding: 2px 6px;
        box-sizing: border-box;
    }
/* ====== Status Badge: feste Breite ====== */
    .wf-pipes-skin .wf-badge {
        flex: 0 0 var(--wf-badge-w, 86px); /* feste Breite */
        width: var(--wf-badge-w, 86px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 22px;
        line-height: 22px;
        border-radius: 999px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: .4px;
        text-transform: uppercase;
        /* kein Umbruch */
        white-space: nowrap;
    }
/* ====== Textbereich: auch stabil, Ellipsis ====== */
    .wf-pipes-skin .wf-row__main {
        flex: 1 1 auto;
        min-width: 0; /* wichtig für ellipsis in flex children */
        display: flex;
        align-items: center;
    }
.wf-pipes-skin .wf-row__alias {
        display: inline-block;
        max-width: var(--wf-alias-w, 320px); /* optional feste/limitierte Breite */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        color:var(--wf-text-1);
    }
/* Wenn du zusätzlich noch “Text / Workflowname” anzeigen willst: */
    .wf-pipes-skin .wf-row__text {
        display: inline-block;
        max-width: var(--wf-text-w, 520px);
        margin-left: 10px;
        opacity: .9;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
/* ====== Optional: Colors für Badge (WISO) ====== */
.wf-pipes-skin .wf-badge--run {
    border-color: var(--wf-row-run-bd);
    background: var(--wf-row-run-bg);
    color: var(--wf-row-run-co);
}

.wf-pipes-skin .wf-badge--pend {
    border-color: var(--wf-row-pend-bd);
    background: var(--wf-row-pend-bg);
    color: var(--wf-row-pend-co);
}

.wf-pipes-skin .wf-badge--wait {
    border-color: var(--wf-row-wait-bd);
    background: var(--wf-row-wait-bg);
    color: var(--wf-row-wait-co);
}

.wf-pipes-skin .wf-badge--done {
    border-color: var(--wf-row-done-bd);
    background: var(--wf-row-done-bg);
    color: var(--wf-row-done-co);
}

.wf-pipes-skin .wf-badge--err {
    border-color: var(--wf-row-err-bd);
    background: var(--wf-row-err-bg);
    color: var(--wf-row-err-co);
}

.wf-pipes-skin .wf-badge--idle {
    border-color: var(--wf-row-idle-bd);
    background: var(--wf-row-idle-bg);
    color: var(--wf-row-idle-co);
}

/* ------------------------------------------------------------
   Compact Layout: 3 Cards nebeneinander
------------------------------------------------------------ */
.wf-state--compact .wf-grid--3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr; /* Prozesssteuerung leicht breiter */
    gap: 12px;
    align-items: start;
}
/* Responsive fallback */
@media (max-width: 1100px) {
    .wf-state--compact .wf-grid--3 {
        grid-template-columns: 1fr;
    }
}
.wf-pipes-skin .wf-state--compact .wf-card--tight {
    padding: 12px;
}
.wf-pipes-skin .wf-state--compact .wf-cardTitle {
    margin-bottom: 10px;
}
/* ------------------------------------------------------------
   Buttons kompakter
------------------------------------------------------------ */
.wf-state--compact .wf-btn--sm {
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 10px;
    line-height: 1;
}
.wf-pipes-skin .wf-state--compact .wf-actions--tight {
    gap: 8px;
}
.wf-pipes-skin .wf-state--compact .wf-note--tight {
    margin-top: 10px;
    padding: 8px 10px;
    font-size: 12px;
    max-width: 700px;
    max-height: 20px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Layout: Textbox + Button */
.wf-pipes-skin .wf-ackline-row {
    display: flex;
    gap: 8px;
    align-items: center; /* Button vertikal zentriert */
}

/* Textbox */
.wf-pipes-skin .wf-ackline-textbox {
    flex: 1;
    max-width: 700px; /* ⬅️ HIER */
    width: 100%;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.4;
    box-sizing: border-box;
    background: var(--wf-surface-3, #0f172a);
    color: var(--wf-text-1, #e5e7eb);
    border: 1px solid var(--wf-border, #334155);
    border-radius: 4px;
    font-family: Consolas, "Courier New", monospace;
}

/* --------------------------------------------------
   wfAckLine – Statusfarben (ok / warn / err)
   -------------------------------------------------- */
.wf-pipes-skin #wfAckLineText {
    width: 100%;
    max-width: 700px;
    height: 20px;
    resize: none;
    overflow-y: auto;
    padding: 2px 6px;
    line-height: 16px;
    font-size: 12px;
    border: 1px solid #9aa0a6; /* neutral */
    border-radius: 4px;
    background-color:var(--wf-surface-3);
    color: var(--wf-text-1);
    transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

    /* ---------------- OK ---------------- */
    .wf-pipes-skin #wfAckLineText.is-ok {
        border-color: #22c55e; /* grün */
        color: #22c55e;
        box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25);
    }

    /* ---------------- WARN ---------------- */
    .wf-pipes-skin #wfAckLineText.is-warn {
        border-color: #f59e0b; /* orange */
        color: #f59e0b;
        box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
    }

    /* ---------------- ERROR ---------------- */
    .wf-pipes-skin #wfAckLineText.is-err {
        border-color: #ef4444; /* rot */
        color: #ef4444;
        box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
    }

    /* Fokus */
    .wf-pipes-skin .wf-ackline-textbox:focus {
        outline: none;
        border-color: var(--wf-accent, #0b4f9e);
    }

    /* ---------- Scrollbar (WebKit / Chromium / Edge) ---------- */
    .wf-pipes-skin .wf-ackline-textbox::-webkit-scrollbar {
        width: 8px;
    }

    .wf-pipes-skin .wf-ackline-textbox::-webkit-scrollbar-track {
        background: #0b1220;
        border-radius: 4px;
    }

    .wf-pipes-skin .wf-ackline-textbox::-webkit-scrollbar-thumb {
        background: #334155;
        border-radius: 4px;
    }

        .wf-pipes-skin .wf-ackline-textbox::-webkit-scrollbar-thumb:hover {
            background: #475569;
        }

/* ---------- Scrollbar (Firefox) ---------- */
.wf-pipes-skin .wf-ackline-textbox {
    scrollbar-width: thin;
    scrollbar-color: var(--wf-scrollbar-color);
}

/* ---------- Copy Button ---------- */
.wf-pipes-skin .wf-ackline-copy {
    height: 20px;
    min-height: 20px;
    line-height: 18px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
    background:var(--wf-accent-strong);
    color:var(--wf-text-1);
    border: 1px solid #334155;
    border-radius: 4px;
    cursor: pointer;
}

    .wf-pipes-skin .wf-ackline-copy:hover {
        background: #0b4f9e;
        border-color: #0b4f9e;
    }

    .wf-pipes-skin .wf-ackline-copy:active {
        transform: translateY(1px);
    }

/* ------------------------------------------------------------
   Card- Status KPIs kompakter Status
------------------------------------------------------------ */
.wf-state--compact .wf-kpis--tight {
    display: grid;
    gap: 10px;
}
.wf-pipes-skin .wf-state--compact .wf-kpi--mini .wf-kpiValue {
    font-size: 16px;
    letter-spacing: .2px;
}
.wf-pipes-skin .wf-state--compact .wf-kpi--mini .wf-kpiHint {
    font-size: 11px;
    opacity: .75;
}
.wf-pipes-skin .wf-kpi--mini {
    background-color: var(--wf-surface-3);
    border-color:var(--wf-border-strong)
}
/* ------------------------------------------------------------
   Prozesssteuerung - Input Layout sauber
------------------------------------------------------------ */
.wf-state--compact .wf-procGrid--tight {
    display: grid;
    gap: 10px;
}
.wf-pipes-skin .wf-state--compact .wf-procRow {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    align-items: center;
}
.wf-pipes-skin .wf-state--compact .wf-procLabel {
    font-size: 12px;
    opacity: .85;
}
/* Inputs - WISO Dark */
.wf-state--compact .wf-input {
    height: 34px;
    border-radius: 10px;
    padding: 0 10px;
    outline: none;
    border: 1px solid rgba(65,167,225,.22); /* #41A7E1 */
    background: #2d3039;
    color: #fff;
    box-sizing: border-box;
}
.wf-pipes-skin .wf-state--compact .wf-input:focus {
        border-color: rgba(65,167,225,.55);
        box-shadow: 0 0 0 3px rgba(65,167,225,.12);
    }
/* Readonly optisch klar */
.wf-state--compact .wf-input--ro {
    background: #3f4350;
    border-color: rgba(63,67,80,.9);
    color: rgba(255,255,255,.88);
}
/* NumericUpDown wrapper */
.wf-state--compact .wf-num {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}
/* Number Input: rechts genug Platz für Spinner */
.wf-state--compact .wf-input--num {
    padding-right: 36px;
    -moz-appearance: textfield;
}
.wf-pipes-skin .wf-state--compact .wf-input--num::-webkit-outer-spin-button, .wf-pipes-skin .wf-state--compact .wf-input--num::-webkit-inner-spin-button {
        opacity: 1;
    }
/* kleines hint label rechts */
.wf-state--compact .wf-numHint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: .7;
    pointer-events: none;
}
/* Action area in Prozesssteuerung */
.wf-state--compact .wf-procActions--tight {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
/* Events card etwas luft */
.wf-state--compact .wf-card--events {
    margin-top: 12px;
}
/* ------------------------------------------------------------
   Equal height row: cards gleich hoch
------------------------------------------------------------ */
.wf-state--compact .wf-grid--equal {
    align-items: stretch;
}

/*------------------------------------------------------------ 
    Commands, Status;Prozesssteuerung,Events
------------------------------------------------------------ */

.wf-pipes-skin .wf-card {
    background-color: var(--wf-surface-1);
    color: var(--wf-text-1);
    border-color: var(--wf-border-strong);
}
/*------------------------------------------------------------ 
    Commands Buttons
------------------------------------------------------------ */
.wf-pipes-skin .wf-btn--danger {
    background: var(--wf-surface-3);
    border-color: rgb(255, 59, 48);
    color: var(--wf-text-1)
}

.wf-pipes-skin .wf-btn--danger:hover {
    background: rgba(255, 59, 48,0.5);
}

.wf-pipes-skin .wf-btn--primary {
    background: var(--wf-surface-3);
    border-color: rgb(0, 192, 96);
    color: var(--wf-text-1)
}

    .wf-pipes-skin .wf-btn--primary:hover {
        background: rgba(0, 192, 96,0.5);
    }

.wf-pipes-skin .wf-btn--warn {
    background: var(--wf-surface-3);
    border-color: rgb(244, 149, 25);
    color:var(--wf-text-1)
}

.wf-pipes-skin .wf-btn--warn:hover {
    background: rgba(244, 149, 25,0.5);
}

.wf-pipes-skin .wf-btn--action {
    background: var(--wf-surface-3);
    border-color: rgb(11, 79, 158);
    color: var(--wf-text-1)
}

    .wf-pipes-skin .wf-btn--action:hover {
        background: rgba(11, 79, 158,0.5);
    }

.wf-pipes-skin .wf-note {
    background: var(--wf-surface-3);
    border-color:var(--wf-border);
    color:rgb(244,149,25)
}

/*------------------------------------------------------------ 
    Prozesssteuerung Fields/Buttons
------------------------------------------------------------ */
/* ------------------------------------------------------------
   Inputs (wie zuvor)
------------------------------------------------------------ */
.wf-state--compact .wf-input {
    height: 34px;
    border-radius: 10px;
    padding: 0 10px;
    outline: none;
    border: 1px solid rgba(65,167,225,.22);
    background: var(--wf-surface-3);
    color: var(--wf-text-1);
    box-sizing: border-box;
}

.wf-pipes-skin .wf-state--compact .wf-input:focus {
    border-color: rgba(65,167,225,.55);
    box-shadow: 0 0 0 3px rgba(65,167,225,.12);
}

.wf-pipes-skin .wf-state--compact .wf-input--ro {
    background: var(--wf-surface-3);
    border-color: var(--wf-border);
    color: var(--wf-text-1);
}

.wf-pipes-skin .wf-state--compact .wf-input--num {
    padding-right: 36px;
    -moz-appearance: textfield;
}

    .wf-pipes-skin .wf-state--compact .wf-input--num::-webkit-outer-spin-button, .wf-pipes-skin .wf-state--compact .wf-input--num::-webkit-inner-spin-button {
        opacity: 1;
    }

.wf-pipes-skin .wf-state--compact .wf-num {
    position: relative;
    display: grid;
}

.wf-pipes-skin .wf-state--compact .wf-numHint {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: .7;
    pointer-events: none;
}

.wf-pipes-skin .wf-state--compact .wf-procRow--inline {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    align-items: center;
}

.wf-pipes-skin .wf-state--compact .wf-procInline {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.wf-pipes-skin .wf-state--compact .wf-btn--icon {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    border-radius: 10px;
}
/* ------------------------------------------------------------
   Prozesssteuerung v2
------------------------------------------------------------ */
.wf-state--compact .wf-procGrid--v2 {
    display: grid;
    gap: 10px;
}
/* Base row label + value */
.wf-state--compact .wf-procRow {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    align-items: center;
}

.wf-pipes-skin .wf-state--compact .wf-procLabel {
    font-size: 12px;
    opacity: .85;
}
/* ActiveProcs row: rechts Input + Toggle */
.wf-state--compact .wf-procRow--toggle .wf-procRight {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}
/* Toggle block */
.wf-state--compact .wf-procToggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: 10px;
    background: var(--wf-surface-3);
    height: 36px;
    border: 1px solid var(--wf-border);
}

.wf-pipes-skin .wf-state--compact .wf-procToggleLabel {
    font-size: 11px;
    opacity: .8;
    white-space: nowrap;
}
/* Smaller switch (optional) */
.wf-state--compact .wf-switch--sm {
    transform: scale(.9);
    transform-origin: right center;
}
/* Prozesse row: rechte Seite ist eine Spalte (Input + Button) */
.wf-state--compact .wf-procRow--stack .wf-procStack {
    display: grid;
    gap: 10px;
    align-items: center;
}
/* NextStepAll im Proc: rechts ausrichten */
.wf-state--compact .wf-procRow--stack .wf-btn {
    justify-self: end;
    width: auto;
    background: yellow;
}
.wf-pipes-skin .wf-slider {
    background: var(--wf-surface-3);
    border-color: var(--wf-border);
}
.wf-pipes-skin .wf-slider-ez {
    background: var(--wf-surface-3);
    border-color: var(--wf-border);
}
    /*------------------------------------------------------------ 
    Workflow Control
    ------------------------------------------------------------ */
    .wf-pipes-skin .wf-pill {
    background-color: var(--wf-surface-3);
    border-color: var(--wf-border-strong);
}
.wf-pipes-skin .wf-btn--reconnect {
    background-color: var(--wf-surface-3);
    border-color: var(--wf-border-strong);
    color: var(--wf-text-1);
}
    .wf-pipes-skin .wf-btn--reconnect:hover {
        background: var(--wf-button-bg-1);
        border-color: var(--wf-border);
        color: var(--wf-text-1);
    }
/*------------------------------------------------------------ 
    Events,Pipes im Status
------------------------------------------------------------ */
.wf-pipes-skin .wf-state--compact .wf-card--equal {
    display: flex;
    flex-direction: column;
    min-height: 190px; /* feinjustieren: passt i.d.R. zur Status-Card */
    border-color: var(--wf-border-strong);
}
/*------------------------------------------------------------ 
    Events
------------------------------------------------------------ */
.wf-pipes-skin .wf-ev2 {
    background-color: var(--wf-surface-3);
    border-color: var(--wf-border-strong)
}
.wf-pipes-skin .wf-ev2Text {
    color: var(--wf-text-1);
}
/* Spacer nimmt freien Platz ein -> Footer/Note bleibt unten */
.wf-state--compact .wf-spacer {
    flex: 1 1 auto;
    height: 12px;
}
/* ------------------------------------------------------------
   Commands: entzerren (2x2 Grid statt enger Flow)
------------------------------------------------------------ */
.wf-state--compact .wf-actions--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
}
/* Optional: Buttons gleich hoch */
    .wf-state--compact .wf-actions--grid .wf-btn {
        width: 100%;
    }
/* Kleine "soft" Variante für NextStepAll im Proc Bereich */
.wf-state--compact .wf-btn--soft {
    background: rgba(65,167,225,.12);
    border: 1px solid rgba(65,167,225,.22);
}

/* ============================================================
   8) Kleine Qualitätssicherung / Fixes
   ------------------------------------------------------------
   - Dein .wiso-pipegrid-header steht aktuell auf rot.
     Für produktiv eher theme-aware.
   ============================================================ */

/* RUN / PENDING / WAIT → Workflow fließt */
.wf-row--active {
    background-color: rgba(255,255,255,0.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.wf-pipes-skin .wf-row--error {
    background-color: rgba(255,255,255,0.04);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.wf-pipes-skin .wf-row--idle, .wf-pipes-skin .wf-row--done {
    background: transparent;
    box-shadow: none;
    opacity: 0.75;
}

/* Ensure it fills DHTMLX cell content area */
.wf-pipes-skin { width: 100%; height: 100%; }
.wf-pipes-skin .wf-state { width: 100%; height: 100%; }

.wf-logStatus {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
}

.wf-logStatus__img {
    width: 16px;
    height: 16px;
    display: block;
}