/**
 * /assets/css/live-sync.css
 *
 * Purpose:  Styles fuer Live-Sync Indicator + Update-Animationen
 * Deps:     app.css (variables)
 * Load:     index.php
 * Version:  1.0.0
 */

/* ====================================================================
   LIVE INDICATOR (oben rechts, zeigt aktives Polling an)
   ==================================================================== */

.live-indicator {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    user-select: none;
}

.live-indicator--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pulsierender gruener Punkt */
.live-indicator__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #5dd6c9);
    box-shadow: 0 0 6px rgba(93, 214, 201, 0.6);
    animation: live-pulse 2s ease-in-out infinite;
}

.live-indicator__text {
    color: var(--accent, #5dd6c9);
}

/* Flash bei Update */
.live-indicator--flash .live-indicator__dot {
    background: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}

.live-indicator--flash .live-indicator__text {
    color: #fff;
}

@keyframes live-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

/* ====================================================================
   LIVE UPDATE FLASH (kurzes Aufleuchten bei geaenderten Werten)
   ==================================================================== */

.live-updated {
    animation: live-value-flash 0.8s ease-out;
}

@keyframes live-value-flash {
    0% {
        color: var(--accent, #5dd6c9);
        text-shadow: 0 0 8px rgba(93, 214, 201, 0.6);
    }
    100% {
        color: inherit;
        text-shadow: none;
    }
}

/* ====================================================================
   REDUCED MOTION
   ==================================================================== */

@media (prefers-reduced-motion: reduce) {
    .live-indicator__dot {
        animation: none;
    }
    .live-updated {
        animation: none;
    }
    @keyframes live-pulse {
        /* disabled */
    }
    @keyframes live-value-flash {
        /* disabled */
    }
}