/* ============================================================
   tutorial.css — Guided-Tutorial Overlay + Highlights (v0.9.4.31)
   ============================================================
   Enthaelt:
   - .tutorial-highlight : pulsierender Glow/Outline auf Action-Elementen
   - body.tutorial-input-locked : sperrt alle Klicks ausser auf
     .tutorial-input-allowed + .tutorial-highlight + Pinny-UI
   - body.tutorial-active : root-flag, kann fuer weitere globale
     Styles genutzt werden (aktuell leer)
   ============================================================ */

/* --- Pinny immer on top waehrend Tutorial --- */
body.tutorial-active #klammi-root {
    z-index: 99999 !important;
}

/* --- Pulse-Highlight --- */
.tutorial-highlight {
    animation: tutorial-pulse 1.3s ease-in-out infinite;
    outline: 3px solid rgba(255, 210, 100, 0.85);
    outline-offset: 2px;
    border-radius: 4px;
    position: relative;
    z-index: 9997 !important;
    box-shadow: 0 0 0 2px rgba(255, 210, 100, 0.5), 0 0 18px 4px rgba(255, 210, 100, 0.55);
}

/* Spezielle Staerke bei Range-Slider (Outline alleine ist dort schwach sichtbar) */
input[type="range"].tutorial-highlight {
    box-shadow: 0 0 0 2px rgba(255, 210, 100, 0.85), 0 0 18px 6px rgba(255, 210, 100, 0.6);
}

@keyframes tutorial-pulse {
    0%, 100% {
        outline-color: rgba(255, 210, 100, 0.85);
        box-shadow: 0 0 0 2px rgba(255, 210, 100, 0.5), 0 0 18px 4px rgba(255, 210, 100, 0.55);
    }
    50% {
        outline-color: rgba(255, 230, 140, 1);
        box-shadow: 0 0 0 3px rgba(255, 230, 140, 0.85), 0 0 28px 8px rgba(255, 230, 140, 0.8);
    }
}

/* --- Input-Lock --- */
/*
   Strategie: body bekommt Klasse tutorial-input-locked.
   Alles innerhalb bekommt per * pointer-events:none.
   .tutorial-input-allowed + .tutorial-highlight + Klammi-UI + Lead-Modal
   bekommen pointer-events:auto zurueck.
*/
body.tutorial-input-locked .desktop,
body.tutorial-input-locked .taskbar,
body.tutorial-input-locked .topbar,
body.tutorial-input-locked .start-menu,
body.tutorial-input-locked .modal-overlay {
    pointer-events: none !important;
}

/* v0.9.4.53: Explizit alle Desktop-Shortcuts/Taskbar-Kinder mit !important
   sperren — sonst gewinnen deren eigene pointer-events: auto Regeln. */
body.tutorial-input-locked .desktop-shortcuts,
body.tutorial-input-locked .desktop-shortcut,
body.tutorial-input-locked .taskbar *,
body.tutorial-input-locked .topbar *,
body.tutorial-input-locked .start-menu * {
    pointer-events: none !important;
}

/* Allowed: Highlight-Targets + explicit allowed + Tutorial-Controls */
body.tutorial-input-locked .tutorial-input-allowed,
body.tutorial-input-locked .tutorial-highlight,
body.tutorial-input-locked #klammi-root,
body.tutorial-input-locked #klammi-root *,
body.tutorial-input-locked #lead-modal {
    pointer-events: auto !important;
}

/* Kinder von Highlight-Targets duerfen nicht blockiert werden (falls Highlight
   auf einem Wrapper liegt). */
body.tutorial-input-locked .tutorial-highlight *,
body.tutorial-input-locked .tutorial-input-allowed * {
    pointer-events: auto !important;
}

/* Dimm-Overlay (subtil) fuer gesperrte Bereiche */
body.tutorial-input-locked::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 25, 0.28);
    z-index: 9996;
    pointer-events: none;
}

/* Hebe highlight + pinny ueber das Dimm-Overlay */
body.tutorial-input-locked .tutorial-highlight,
body.tutorial-input-locked .tutorial-input-allowed,
body.tutorial-input-locked #klammi-root,
body.tutorial-input-locked #lead-modal {
    z-index: 9998 !important;
}