/* ============================================================================
   W6 Transactionlog – Realtime Controls (Toolbar)
   - FIXE Größen -> kein Verschieben
   - Toggle als Switch (Track + Thumb)
   - Lampe separat
   ============================================================================ */

/* Toolbar-Items: fixe Breite/Höhe, kein Shrink/Wrap */
.w6-txlog-rt-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 120px; /* 🔒 fix -> verhindert Shift */
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 120px; /* 🔒 falls Toolbar Flex nutzt */
}

/* Lampe ist eigenes Item, schmaler */
.w6-txlog-rt-item--lamp {
    width: 44px;
    flex: 0 0 44px;
}

/* ============================================================================
   Toggle (Switch)
   ============================================================================ */

.w6-txlog-rt-toggle {
    width: 112px; /* 🔒 fix */
    height: 28px; /* 🔒 fix */
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.35);
    cursor: pointer;
    user-select: none;
    position: relative;
    padding: 0;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

    .w6-txlog-rt-toggle:hover {
        border-color: rgba(255,255,255,.35);
    }

    .w6-txlog-rt-toggle:active {
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 rgba(0,0,0,0);
    }

    /* Track (innen) */
    .w6-txlog-rt-toggle .w6-txlog-rt-track {
        position: absolute;
        inset: 4px;
        border-radius: 999px;
        background: rgba(0,0,0,.18);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
    }

    /* Thumb (Knopf) */
    .w6-txlog-rt-toggle .w6-txlog-rt-thumb {
        position: absolute;
        top: 5px;
        left: 6px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.55));
        box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.20);
        transition: transform .18s ease;
    }

    /* Labels: liegen fix, ändern nur opacity (keine Breitenänderung) */
    .w6-txlog-rt-toggle .w6-txlog-rt-label {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        pointer-events: none;
    }

    .w6-txlog-rt-toggle .w6-txlog-rt-label-live,
    .w6-txlog-rt-toggle .w6-txlog-rt-label-pause {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity .15s ease;
    }

.w6-txlog-rt-text {
    margin-left: 6px;
    font-size: 12px;
    opacity: .85;
    user-select: none;
}

    /* ============================================================================
   Zustand: LIVE
   ============================================================================ */
    .w6-txlog-rt-toggle[data-state="1"] .w6-txlog-rt-thumb {
        transform: translateX(82px); /* 112w: thumb wandert nach rechts */
    }

    .w6-txlog-rt-toggle[data-state="1"] .w6-txlog-rt-track {
        background: rgba(29,185,84,.22);
        box-shadow: inset 0 0 0 1px rgba(29,185,84,.28);
    }

    .w6-txlog-rt-toggle[data-state="1"] .w6-txlog-rt-label-live {
        opacity: 1;
    }

    .w6-txlog-rt-toggle[data-state="1"] .w6-txlog-rt-label-pause {
        opacity: 0;
    }

    /* ============================================================================
   Zustand: PAUSE
   ============================================================================ */
    .w6-txlog-rt-toggle[data-state="0"] .w6-txlog-rt-track {
        background: rgba(215,38,38,.20);
        box-shadow: inset 0 0 0 1px rgba(215,38,38,.25);
    }

    .w6-txlog-rt-toggle[data-state="0"] .w6-txlog-rt-label-live {
        opacity: 0;
    }

    .w6-txlog-rt-toggle[data-state="0"] .w6-txlog-rt-label-pause {
        opacity: 1;
    }

/* ============================================================================
   Lampe (separat!)
   ============================================================================ */
.w6-txlog-rt-lamp {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 0 8px rgba(0,0,0,.35);
}

    .w6-txlog-rt-lamp[data-state="1"] {
        background: radial-gradient(circle at 30% 30%, #6bff9d, #1db954);
        box-shadow: 0 0 10px rgba(29,185,84,.9), inset 0 0 0 1px rgba(0,0,0,.4);
    }

    .w6-txlog-rt-lamp[data-state="0"] {
        background: radial-gradient(circle at 30% 30%, #ff7b7b, #d72626);
        box-shadow: 0 0 10px rgba(215,38,38,.85), inset 0 0 0 1px rgba(0,0,0,.4);
    }

/* ============================================================================
   Light Theme Anpassung
   ============================================================================ */
[data-wiso-theme="light"] .w6-txlog-rt-toggle,
[data-wiso-theme="contrast-light"] .w6-txlog-rt-toggle {
    border-color: rgba(0,0,0,.18);
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.01));
}

    [data-wiso-theme="light"] .w6-txlog-rt-toggle:hover,
    [data-wiso-theme="contrast-light"] .w6-txlog-rt-toggle:hover {
        border-color: rgba(0,0,0,.35);
    }
/* ============================================================
   W6 Viewer Button – Hover & Press
   ============================================================ */

.w6_viewer_btn {
    position: relative;
    transition: background-color .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease;
    will-change: transform, box-shadow;
}

    /* ------------------------------------------------------------
   Hover – leicht „anheben“, kein Verschieben
   ------------------------------------------------------------ */
    .w6_viewer_btn:hover {
        box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
        transform: translateY(-1px);
    }

    /* ------------------------------------------------------------
   Active / Press – gedrückt
   ------------------------------------------------------------ */
    .w6_viewer_btn:active {
        transform: translateY(0);
        box-shadow: inset 0 3px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.25);
    }

    /* ------------------------------------------------------------
   Focus (Keyboard)
   ------------------------------------------------------------ */
    .w6_viewer_btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(11,79,158,.75), 0 6px 16px rgba(0,0,0,.25);
    }

    /* ------------------------------------------------------------
   Disabled (falls später benötigt)
   ------------------------------------------------------------ */
    .w6_viewer_btn[disabled],
    .w6_viewer_btn[aria-disabled="true"] {
        opacity: .45;
        cursor: default;
        pointer-events: none;
        box-shadow: none;
    }
/* Container für beide Buttons */
.w6-tl-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
}

/* Icon-Button */
.w6-tl-action--icon {
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

    /* Hover nur leichte Hinterlegung */
    .w6-tl-action--icon:hover {
        background: rgba(0, 0, 0, 0.06);
    }

    /* Icon */
    .w6-tl-action--icon img {
        width: 16px;
        height: 16px;
        pointer-events: none;
    }
/* ============================================================
   AutoRefresh Button: grün + blink
   ============================================================ */

.w6-auto-active {
    border-color: #1fbf4a !important;
}

    .w6-auto-active .wiso_tb__icon {
        color: #1fbf4a !important;
    }

.w6-auto-disabled {
    cursor: default !important;
    opacity: 0.95;
}

/* Blink Effekt (Glow) */
.w6-auto-blink {
    animation: w6AutoBlink 0.5s ease-in-out;
}

@keyframes w6AutoBlink {
    0% {
        box-shadow: 0 0 0 0 rgba(31,191,74,0.0);
    }

    50% {
        box-shadow: 0 0 10px 3px rgba(31,191,74,0.7);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(31,191,74,0.0);
    }
}