/* =============================================================================
   W6 FORM THEMES (Override-Paket für wiso.css)
   =============================================================================
   Zweck:
     - Dieses CSS überschreibt/ergänzt NUR Form-Styling und ist update-sicher,
       weil es nicht wiso.css editiert, sondern scoped Overrides nutzt.
     - Pro Form frei wählbares Design über Root-Klasse:
         "w6-form" + optional "w6-form--<theme>"

   Verwendung:
     1) Datei z.B. als:  w6.forms.css  speichern und nach wiso.css laden.
     2) Am Form-Container (oder am Parent-Widget) Klassen setzen:
         class="wiso_widget wiso_form w6-form w6-form--dark"
         class="wiso_widget wiso_form w6-form w6-form--light"
         class="wiso_widget wiso_form w6-form w6-form--compact"
         class="wiso_widget wiso_form w6-form w6-form--itemsPie"
     3) Alternativ kannst du die Root-Klasse auf einen äußeren Wrapper setzen,
        wenn die Form darunter gerendert wird.

   Hinweis:
     - Da ich deine konkrete wiso.css hier nicht "sehen" kann, werden die
       Selektoren bewusst breit gehalten:
         .wiso_widget.w6-form input/select/textarea/fieldset/...
       Das überschreibt zuverlässig, solange diese Datei nach wiso.css geladen wird.
     - Wenn du spezielle interne Klassen hast (z.B. .dhx_form, .wiso_input usw.),
       kannst du sie hier zusätzlich in die Selektoren aufnehmen.

   Autor / Stand:
     - Wiberg Solutions / W6
     - 2025-12-22
   ============================================================================= */


/* =============================================================================
   0) ROOT: Theme-Variablen (Default / Dark)
   ============================================================================= */

.wiso_widget.w6-form {
    /* Farben */
    --w6-bg: #0f1116;
    --w6-bg-2: #12151c;
    --w6-bg-3: #1f222a;
    --w6-text: #e5e5e5;
    --w6-text-dim: #9ca3af;
    --w6-border: #3f4350;
    /* Accent */
    --w6-accent: #0b4f9e;
    --w6-accent-glow: rgba(11,79,158,.35);
    /* Status */
    --w6-ok: #16a34a;
    --w6-warn: #f59e0b;
    --w6-err: #ef4444;
    /* Layout */
    --w6-radius: 8px;
    --w6-radius-lg: 10px;
    /* Controls */
    --w6-input-h: 34px;
    --w6-pad-y: 6px;
    --w6-pad-x: 10px;
    /* Typo */
    --w6-font: system-ui, Segoe UI, Arial, sans-serif;
    --w6-font-mono: ui-monospace, Consolas, monospace;
}


    /* =============================================================================
   1) TYPO / Labels / Texte
   ============================================================================= */

    .wiso_widget.w6-form,
    .wiso_widget.w6-form * {
        font-family: var(--w6-font);
        box-sizing: border-box;
    }

        .wiso_widget.w6-form label {
            color: var(--w6-text);
        }

        .wiso_widget.w6-form .wiso_label,
        .wiso_widget.w6-form .dhx_label,
        .wiso_widget.w6-form .form-label {
            color: var(--w6-text);
            font-size: 12.5px;
            line-height: 1.35;
        }

        .wiso_widget.w6-form .wiso_hint,
        .wiso_widget.w6-form .dhx_hint,
        .wiso_widget.w6-form .form-hint {
            color: var(--w6-text-dim);
            font-size: 12px;
        }


/* =============================================================================
   2) INPUT / TEXTAREA
   ============================================================================= */

        .wiso_widget.w6-form input[type="text"],
        .wiso_widget.w6-form input[type="password"],
        .wiso_widget.w6-form input[type="email"],
        .wiso_widget.w6-form input[type="number"],
        .wiso_widget.w6-form input[type="date"],
        .wiso_widget.w6-form input[type="time"],
        .wiso_widget.w6-form input[type="search"],
        .wiso_widget.w6-form textarea {
            height: var(--w6-input-h);
            padding: var(--w6-pad-y) var(--w6-pad-x);
            border-radius: var(--w6-radius);
            border: 1px solid var(--w6-border);
            background: var(--w6-bg);
            color: var(--w6-text);
            /* wiso/dhx Defaults neutralisieren */
            box-shadow: none;
            outline: none;
        }

        .wiso_widget.w6-form textarea {
            height: auto; /* Textarea darf wachsen */
            min-height: 86px;
            resize: vertical;
            line-height: 1.45;
        }

            /* Focus */
            .wiso_widget.w6-form input:focus,
            .wiso_widget.w6-form textarea:focus {
                border-color: var(--w6-accent);
                box-shadow: 0 0 0 2px var(--w6-accent-glow);
            }

            /* Disabled */
            .wiso_widget.w6-form input:disabled,
            .wiso_widget.w6-form textarea:disabled {
                opacity: .65;
                cursor: not-allowed;
            }

            /* Placeholder */
            .wiso_widget.w6-form input::placeholder,
            .wiso_widget.w6-form textarea::placeholder {
                color: var(--w6-text-dim);
                opacity: .75;
            }


/* =============================================================================
   3) SELECT
   ============================================================================= */

        .wiso_widget.w6-form select {
            height: var(--w6-input-h);
            padding: var(--w6-pad-y) 28px var(--w6-pad-y) var(--w6-pad-x);
            border-radius: var(--w6-radius);
            border: 1px solid var(--w6-border);
            background: var(--w6-bg);
            color: var(--w6-text);
            box-shadow: none;
            outline: none;
            /* optisch konsistent */
            appearance: none; /* Browser-Arrow neutralisieren */
        }

            /* Focus */
            .wiso_widget.w6-form select:focus {
                border-color: var(--w6-accent);
                box-shadow: 0 0 0 2px var(--w6-accent-glow);
            }

/* Optional: einfacher Arrow (falls gewünscht)
   -> funktioniert nur, wenn dein select nicht schon per Component ersetzt wird.
*/
        .wiso_widget.w6-form select {
            background-image: linear-gradient(45deg, transparent 50%, var(--w6-text-dim) 50%), linear-gradient(135deg, var(--w6-text-dim) 50%, transparent 50%);
            background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
            background-size: 6px 6px, 6px 6px;
            background-repeat: no-repeat;
        }


/* =============================================================================
   4) CHECKBOX
   =============================================================================
   Hinweis:
     - Wenn eure Checkbox ein native <input type="checkbox"> ist, greifen die
       Styles unten.
     - Falls wiso/dhx eigene Wrapper nutzt (z.B. .wiso_checkbox__box),
       sind die Wrapper-Styles ebenfalls enthalten.
*/

        /* Native Checkbox minimal angleichen */
        .wiso_widget.w6-form input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--w6-accent);
        }

        /* Wrapper / Custom Checkbox (falls vorhanden) */
        .wiso_widget.w6-form .wiso_checkbox__box,
        .wiso_widget.w6-form .dhx_checkbox__box {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            background: var(--w6-bg);
            border: 1px solid var(--w6-border);
        }

        .wiso_widget.w6-form .wiso_checkbox--checked .wiso_checkbox__box,
        .wiso_widget.w6-form .dhx_checkbox--checked .dhx_checkbox__box {
            background: var(--w6-accent);
            border-color: var(--w6-accent);
        }


/* =============================================================================
   5) FIELDSET / GROUPS
   ============================================================================= */

        .wiso_widget.w6-form fieldset {
            border-radius: var(--w6-radius-lg);
            border: 1px solid var(--w6-border);
            background: var(--w6-bg-2);
            padding: 12px 14px;
            margin: 0 0 14px 0;
        }

        .wiso_widget.w6-form legend {
            color: var(--w6-text);
            font-size: 12.5px;
            padding: 0 6px;
            opacity: .95;
        }

        /* Falls ihr Gruppen als Div rendert (häufig in Form-Buildern)
        .wiso_widget.w6-form .wiso_form-group,
        .wiso_widget.w6-form .dhx_form-group {
            border-radius: var(--w6-radius-lg);
            border: 1px solid var(--w6-border);
            background: var(--w6-bg-2);
            padding: 12px 14px;
            margin: 0 0 14px 0;
        }
 */

/* =============================================================================
   6) BUTTONS (optional, falls Form-Buttons im Formbereich liegen)
   ============================================================================= */

        .wiso_widget.w6-form button,
        .wiso_widget.w6-form .wiso_button,
        .wiso_widget.w6-form .dhx_button {
            border-radius: var(--w6-radius);
            border: 1px solid var(--w6-border);
            background: var(--w6-bg-2);
            color: var(--w6-text);
            padding: 7px 12px;
        }

            .wiso_widget.w6-form button:hover,
            .wiso_widget.w6-form .wiso_button:hover,
            .wiso_widget.w6-form .dhx_button:hover {
                border-color: var(--w6-accent);
            }

            .wiso_widget.w6-form button:focus,
            .wiso_widget.w6-form .wiso_button:focus,
            .wiso_widget.w6-form .dhx_button:focus {
                outline: none;
                box-shadow: 0 0 0 2px var(--w6-accent-glow);
            }


/* =============================================================================
   7) VALIDATION / REQUIRED (optional)
   ============================================================================= */

        .wiso_widget.w6-form .is-invalid input,
        .wiso_widget.w6-form .is-invalid select,
        .wiso_widget.w6-form .is-invalid textarea {
            border-color: var(--w6-err) !important;
            box-shadow: 0 0 0 2px rgba(239,68,68,.25) !important;
        }

        .wiso_widget.w6-form .is-required .wiso_label::after,
        .wiso_widget.w6-form .is-required label::after {
            content: " *";
            color: var(--w6-warn);
        }


/* =============================================================================
   8) THEMES
   ============================================================================= */

        /* 8.1 Dark (Default) */
        .wiso_widget.w6-form.w6-form--dark {
            /* nichts nötig; Root ist already dark */
        }

        /* 8.2 Light */
        .wiso_widget.w6-form.w6-form--light {
            --w6-bg: #ffffff;
            --w6-bg-2: #f5f7fb;
            --w6-bg-3: #ffffff;
            --w6-text: #111827;
            --w6-text-dim: #6b7280;
            --w6-border: #d1d5db;
            --w6-accent: #0b4f9e;
            --w6-accent-glow: rgba(11,79,158,.18);
        }

        /* 8.3 Compact (kleinere Controls, weniger Padding) */
        .wiso_widget.w6-form.w6-form--compact {
            --w6-input-h: 30px;
            --w6-pad-y: 5px;
            --w6-pad-x: 8px;
            --w6-radius: 7px;
        }

        /* 8.4 ItemsPie (Modulspezifisch, grün als Accent) */
        .wiso_widget.w6-form.w6-form--itemsPie {
            --w6-accent: #16a34a; /* passend zu euren Werten */
            --w6-accent-glow: rgba(22,163,74,.25);
        }

        /* 8.5 Danger/Red Accent (optional) */
        .wiso_widget.w6-form.w6-form--danger {
            --w6-accent: #ef4444;
            --w6-accent-glow: rgba(239,68,68,.25);
        }


/* =============================================================================
   9) OPTIONAL: Helper-Klassen (pro Feld in DB css-Feld nutzbar)
   ============================================================================= */

/* Breite */
.w6-w-100 {
    width: 100% !important;
}

.w6-w-66 {
    width: 66% !important;
}

.w6-w-50 {
    width: 50% !important;
}

.w6-w-33 {
    width: 33% !important;
}

/* Input-Variante */
.w6-input--mono {
    font-family: var(--w6-font-mono) !important;
}

/* Spacing */
.w6-mb-8 {
    margin-bottom: 8px !important;
}

.w6-mb-12 {
    margin-bottom: 12px !important;
}

.w6-mt-8 {
    margin-top: 8px !important;
}

.w6-mt-12 {
    margin-top: 12px !important;
}
/* =========================================================
   Row Layout
   ========================================================= */
.w6_cat_row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   Row Layout
   ========================================================= */
.w6_cat_row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.w6_cat_left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

/* rechter Block ganz nach rechts */
.w6_cat_color {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* =========================================================
   Hover-Zone für Text + Swatch
   ========================================================= */
.w6_color_value {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* =========================================================
   Text
   ========================================================= */
.w6_color_text {
    font-size: 12px;
    min-width: 72px;
    text-align: right;
    opacity: 0.8;
    line-height: 1;
    transition: transform 140ms ease, color 140ms ease, opacity 140ms ease, text-shadow 140ms ease;
}

/* =========================================================
   Swatch (direkt rechts vom Text)
   ========================================================= */
.w6_color_swatch {
    width: 26px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid #3f4350;
    background: var(--w6-color, #6b7280);
    flex: 0 0 auto;
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, border-color 140ms ease;
}

/* =========================================================
   HOVER: beide simultan (über gemeinsame Zone)
   ========================================================= */
.w6_color_value:hover .w6_color_text {
    opacity: 1;
    color: #ffffff;
    transform: translateY(-1px);
    text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

.w6_color_value:hover .w6_color_swatch {
    transform: translateY(-1px) scale(1.05);
    border-color: #5b5f70;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.35);
    filter: brightness(1.08);
}
/* Wrapper für animiertes Ein-/Ausblenden */
.wiso-collapse {
    overflow: hidden;
    transition: max-height 260ms ease, opacity 200ms ease, transform 200ms ease;
    max-height: 3000px;
    opacity: 1;
    transform: translateY(0);
}

.wiso-collapse--hidden {
    max-height: 0 !important;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}
.wiso-roll {
    display: grid;
    grid-template-rows: 1fr; /* offen */
    transition: grid-template-rows 380ms ease, opacity 200ms ease;
    opacity: 1;
}

    .wiso-roll > * {
        overflow: hidden; /* wichtig: Inhalt “abschneiden” */
    }

.wiso-roll--closed {
    grid-template-rows: 0fr; /* zu */
    opacity: 0.0;
}

/* ==========================================================================
   W6 WorkflowManager UI – Stylesheet
   --------------------------------------------------------------------------
   Zweck:
   - Statusbar (Connected/Reconnecting/Disconnected/Error)
   - Pipe-Grids pro Tab (2 Spalten)
   - Kleine, robuste Defaults (funktioniert in Light/Dark ohne harte Farben)
   --------------------------------------------------------------------------
   Hinweise:
   - Keine festen Farben nötig: wir nutzen überwiegend Border/Opacity/Filter.
   - Wenn du eigene Theme-Variablen hast (z.B. --wiso-accent), kannst du unten
     optional ein paar Variablen überschreiben.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Layout/Container
   -------------------------------------------------------------------------- */

.wiso-workflow-tabbar {
    /* Tabbar neutral: kein harter Hintergrund */
    width: 100%;
    height: 100%;
}

.wiso-workflow-tab-host {
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   2) Pipe Grid
   -------------------------------------------------------------------------- */

.wiso-workflow-pipegrid {
    width: 100%;
    height: 100%;
    /* leichte Abgrenzung ohne harte Farbe */
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

    /* Falls dein Grid interne Klassen hat (DHTMLX/WISO Wrapper):
   - Diese Selektoren sind "best effort" und schaden nicht, wenn sie nicht matchen.
*/
    .wiso-workflow-pipegrid .dhx_grid,
    .wiso-workflow-pipegrid .wiso_grid {
        width: 100%;
        height: 100%;
    }

    /* Kopfzeile etwas kompakter */
    .wiso-workflow-pipegrid .dhx_grid-header,
    .wiso-workflow-pipegrid .wiso_grid-header {
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    /* Zeilen: leichte Hover-Feedbacks (ohne fixe Farbe) */
    .wiso-workflow-pipegrid .dhx_grid-row:hover,
    .wiso-workflow-pipegrid .wiso_grid-row:hover {
        filter: brightness(0.98);
    }

    /* Auswahl: nur etwas stärker abheben */
    .wiso-workflow-pipegrid .dhx_grid-row--selected,
    .wiso-workflow-pipegrid .wiso_grid-row--selected {
        filter: brightness(0.96);
    }

/* --------------------------------------------------------------------------
   3) Statusbar
   -------------------------------------------------------------------------- */

.wiso-wf-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    /* neutral */
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
}

/* Badge (links) */
.wiso-wf-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.02);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.wiso-wf-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    /* default = disconnected */
    background: rgba(0, 0, 0, 0.25);
}

/* Actions (rechts) */
.wiso-wf-status-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    /* Reconnect Button: passt sich an deine wiso_btn an, sonst fallback */
    .wiso-wf-status-actions .wiso_btn {
        cursor: pointer;
    }

    /* Fallback, falls wiso_btn nicht definiert ist */
    .wiso-wf-status-actions button {
        padding: 8px 12px;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,0.12);
        background: rgba(0,0,0,0.03);
        font-weight: 600;
    }

        .wiso-wf-status-actions button:hover {
            filter: brightness(0.98);
        }

/* --------------------------------------------------------------------------
   4) Connection States (per Klasse am Badge)
   -------------------------------------------------------------------------- */

/* Disconnected (Default) */
.wiso-wf-badge--disconnected {
    border-color: rgba(200, 0, 0, 0.35);
    background: rgba(200, 0, 0, 0.06);
}

    .wiso-wf-badge--disconnected .wiso-wf-dot {
        background: rgba(200, 0, 0, 0.6);
    }

/* Connecting: leicht pulsierend (ohne Farbe) */
.wiso-wf-badge--connected {
    border-color: rgba(0, 160, 90, 0.35);
    background: rgba(0, 160, 90, 0.08);
}

    .wiso-wf-badge--connected .wiso-wf-dot {
        background: rgba(0, 160, 90, 0.85);
    }

/* Reconnecting: stärkeres Pulse */
.wiso-wf-badge--reconnecting .wiso-wf-dot {
    background: rgba(0, 0, 0, 0.45);
    animation: wisoWfPulse 0.7s ease-in-out infinite;
}

/* Connected: “stabil” (kein Pulse) */
.wiso-wf-badge--connected .wiso-wf-dot {
    background: rgba(0, 0, 0, 0.65);
}

/* Error: “hart” abheben – ohne Rot fest zu definieren */
.wiso-wf-badge--error {
    border-color: rgba(0, 0, 0, 0.22);
    background: rgba(0, 0, 0, 0.04);
}

    .wiso-wf-badge--error .wiso-wf-dot {
        background: rgba(0, 0, 0, 0.85);
    }

/* Pulse Animation */
@keyframes wisoWfPulse {
    0% {
        transform: scale(1);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.35);
        opacity: 1.0;
    }

    100% {
        transform: scale(1);
        opacity: 0.65;
    }
}

/* --------------------------------------------------------------------------
   5) Dark Mode – automatische Anpassung (best effort)
   -------------------------------------------------------------------------- */
/* Wenn du einen Dark-Mode-Body hast (z.B. .wiso-theme-dark, .dhx_dark, etc.),
   ergänze hier deine echte Klasse. Ich nutze mehrere mögliche Container. */
.wiso-theme-dark .wiso-wf-statusbar,
.dhx_dark .wiso-wf-statusbar,
body.dark .wiso-wf-statusbar {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.25);
}

.wiso-theme-dark .wiso-wf-badge,
.dhx_dark .wiso-wf-badge,
body.dark .wiso-wf-badge {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

.wiso-theme-dark .wiso-workflow-pipegrid,
.dhx_dark .wiso-workflow-pipegrid,
body.dark .wiso-workflow-pipegrid {
    border-color: rgba(255, 255, 255, 0.10);
}

.wiso-wf-statusbar .wiso-wf-badge--connected .wiso-wf-dot {
    background: rgba(0, 160, 90, 0.85) !important;
}

.wiso-wf-statusbar .wiso-wf-badge--disconnected .wiso-wf-dot {
    background: rgba(200, 0, 0, 0.6) !important;
}

/* --------------------------------------------------------------------------
   6) Optional: CSS-Variablen (wenn du später Farben sauber steuern willst)
   -------------------------------------------------------------------------- */
/*
:root {
  --wiso-wf-border: rgba(0,0,0,0.08);
  --wiso-wf-surface: rgba(255,255,255,0.5);
}
.wiso-wf-statusbar { border-color: var(--wiso-wf-border); background: var(--wiso-wf-surface); }
*/
/* ==========================================================
   W6 Workflow State (Darkmode, WISO Colors)
   ========================================================== */

.wf-state {
    color: #fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wf-card {
    background: #2d3039;
    border: 1px solid #000000;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    margin-left: 12px;
    margin-right: 12px;
}

.wf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    margin-left: 12px;
    margin-right: 12px;
}

.wf-left {
    min-width: 220px;
}

.wf-title {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .2px;
}

.wf-sub {
    font-size: 12px;
    opacity: .75;
    margin-top: 2px;
}

.wf-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}

@media(max-width:900px) {
    .wf-grid {
        grid-template-columns: 1fr;
    }
}

.wf-cardTitle {
    font-size: 12px;
    font-weight: 900;
    opacity: .9;
    margin-bottom: 10px;
    letter-spacing: .25px;
}

/* ----------------------------------------------------------
   Pills (Connection / Engine)
   FIX: mehr Breite + kein Abschneiden bei reconnect text
   ---------------------------------------------------------- */
.wf-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #3f4350;
    border: 1px solid #000000;
    border-radius: 999px;
    padding: 8px 12px;
    min-height: 36px;
}

.wf-pill--wide {
    min-width: 230px; /* FIX: Platz für "Connected · Engine STOPPED" */
    max-width: 360px;
}

.wf-pillText {
    font-size: 12px;
    font-weight: 800;
    opacity: .95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   Lamps
   ---------------------------------------------------------- */
.wf-lamp {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #3f4350;
    border: 1px solid rgba(0,0,0,.55);
    box-shadow: 0 0 0 2px rgba(0,0,0,.15), 0 6px 16px rgba(0,0,0,.35);
    display: inline-block;
}

.wf-lamp--sm {
    width: 12px;
    height: 12px;
}

.wf-lamp--gray {
    background: #cecece;
    box-shadow: 0 0 4px rgba(206, 206, 206, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.15);
}


.wf-lamp--green {
    background: #00c060;
    box-shadow: 0 0 0 4px rgba(0,192,96,.18), 0 10px 22px rgba(0,0,0,.35);
}

.wf-lamp--yellow {
    background: #F49519;
    box-shadow: 0 0 0 4px rgba(244,149,25,.18), 0 10px 22px rgba(0,0,0,.35);
}

.wf-lamp--red {
    background: #ff3b30;
    box-shadow: 0 0 0 4px rgba(255,59,48,.18), 0 10px 22px rgba(0,0,0,.35);
}

.wf-lamp--blue {
    background: #41A7E1;
    box-shadow: 0 0 0 4px rgba(65,167,225,.18), 0 10px 22px rgba(0,0,0,.35);
}

@keyframes wfPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}

.wf-lamp.is-pulsing {
    animation: wfPulse 1.2s ease-in-out infinite;
}

/* ----------------------------------------------------------
   Buttons
   ---------------------------------------------------------- */
.wf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.wf-btn {
    appearance: none;
    border: 1px solid #000000;
    background: #3f4350;
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .06s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}

    .wf-btn:hover {
        background: #454a59;
    }

    .wf-btn:active {
        transform: translateY(1px);
    }

.wf-btn--primary {
    background: #0b4f9e;
    border-color: #0b4f9e;
    box-shadow: 0 0 0 3px rgba(65,167,225,.18);
}

    .wf-btn--primary:hover {
        background: #0e5bb3;
    }

.wf-btn--danger {
    background: #a81616;
    border-color: #a81616;
}

    .wf-btn--danger:hover {
        background: #c01b1b;
    }

.wf-btn--warn {
    background: #F49519;
    border-color: #F49519;
    color: #000;
}

    .wf-btn--warn:hover {
        background: #ffab3d;
    }

.wf-btn--ghost {
    background: transparent;
    border-color: #3f4350;
}

    .wf-btn--ghost:hover {
        background: rgba(65,167,225,.10);
        border-color: #41A7E1;
    }

/* FIX: Reconnect Button mit Lampe + Text Platz */
.wf-btn--reconnect {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    justify-content: center;
}

.wf-btnText {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* separator */
.wf-sep {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,.12);
    margin: 0 2px;
}

/* ----------------------------------------------------------
   Notes / ACK
   ---------------------------------------------------------- */
.wf-note {
    margin-top: 10px;
    background: #000000;
    border: 1px solid #3f4350;
    padding: 10px 12px;
    border-radius: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    opacity: .92;
    min-height: 38px;
    display: flex;
    align-items: center;
}

    .wf-note.is-ok {
        border-color: rgba(0,192,96,.6);
    }

    .wf-note.is-warn {
        border-color: rgba(244,149,25,.7);
    }

    .wf-note.is-err {
        border-color: rgba(255,59,48,.7);
    }

/* ----------------------------------------------------------
   KPIs
   ---------------------------------------------------------- */
.wf-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media(max-width:900px) {
    .wf-kpis {
        grid-template-columns: 1fr;
    }
}

.wf-kpi {
    background: #3f4350;
    border: 1px solid #000000;
    border-radius: 14px;
    padding: 12px;
}

.wf-kpiLabel {
    font-size: 12px;
    font-weight: 900;
    opacity: .9;
}

.wf-kpiValue {
    font-size: 16px;
    font-weight: 1000;
    margin-top: 6px;
    letter-spacing: .3px;
}

.wf-kpiHint {
    font-size: 11px;
    opacity: .7;
    margin-top: 4px;
}

/* ----------------------------------------------------------
   Events (WISO Switch style)
   ---------------------------------------------------------- */
.wf-events2 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 14px;
 
}

@media(max-width:900px) {
    .wf-events2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:560px) {
    .wf-events2 {
        grid-template-columns: 1fr;
    }
}

.wf-ev2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    background: #2d3039;
    border: 1px solid #000000;
    min-height: 44px;
}

.wf-ev2Text {
    font-size: 12px;
    font-weight: 900;
    color: #ffffff;
    opacity: .92;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.wf-ev2.is-disabled {
    opacity: .55;
    filter: saturate(.6);
}

/* Switch */
.wf-switch {
    position: relative;
    width: 44px;
    height: 24px;
    display: inline-block;
    flex: 0 0 auto;
}

    .wf-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.wf-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #3f4350;
    border: 1px solid #000000;
    transition: .15s ease;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}

    .wf-slider:before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        top: 2px;
        background: #ffffff;
        border-radius: 50%;
        transition: .15s ease;
        box-shadow: 0 6px 16px rgba(0,0,0,.45);
    }

.wf-switch input:checked + .wf-slider {
    background: #0b4f9e;
    border-color: #0b4f9e;
    box-shadow: 0 0 0 2px rgba(65,167,225,.18);
}

    .wf-switch input:checked + .wf-slider:before {
        transform: translateX(20px);
    }

.wf-switch input:focus + .wf-slider {
    outline: 2px solid rgba(65,167,225,.55);
    outline-offset: 2px;
}

.wf-switch input:disabled + .wf-slider {
    cursor: not-allowed;
    opacity: .6;
}

/* Legend */
.wf-legend {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    opacity: .85;
    font-size: 11px;
    align-items: center;
}

    .wf-legend span {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
    }
/* =============================================================================
   ENDE
   ============================================================================= */