/* ===================================================================
   Event Ticker - Scrolling in monitoring bar
   ================================================================= */

/* Monitoring bar layout */
#monitoringbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.monitoring-bar-left {
    flex-shrink: 0;
}

.monitoring-bar-right {
    flex: 1;
    overflow: hidden;
    margin-left: 16px;
}

/* Event Ticker Container */
.event-ticker {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Fade edges - elegant gradient mask */
.event-ticker::before,
.event-ticker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.event-ticker::before {
    left: 0;
    background: linear-gradient(to right, 
        rgba(10, 10, 10, 1) 0%,
        rgba(10, 10, 10, 0.95) 20%,
        rgba(10, 10, 10, 0.7) 50%,
        rgba(10, 10, 10, 0) 100%
    );
}

.event-ticker::after {
    right: 0;
    background: linear-gradient(to left, 
        rgba(10, 10, 10, 1) 0%,
        rgba(10, 10, 10, 0.95) 20%,
        rgba(10, 10, 10, 0.7) 50%,
        rgba(10, 10, 10, 0) 100%
    );
}

.event-ticker-content {
    display: inline-block;
    white-space: nowrap;
    animation: ticker-scroll 120s linear infinite;
    font-family: var(--font-mono);
    font-size: 10px;
    padding-left: 80px;
}

.event-ticker-content:hover {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Event items spacing */
.event-item {
    display: inline;
    padding: 0 32px;
}

.event-item .event-date {
    color: rgba(255, 255, 255, 0.35);
    margin-right: 10px;
    font-size: 9px;
    letter-spacing: 0.5px;
}

/* Use monitoring bar color classes for ticker events */
.event-ticker-content .bar-purple,
.event-ticker-content .bar-yellow,
.event-ticker-content .bar-accent,
.event-ticker-content .bar-success,
.event-ticker-content .bar-error,
.event-ticker-content .bar-muted,
.event-ticker-content .bar-separator {
    display: inline;
}

/* Separator with more spacing */
.event-ticker-content .bar-separator {
    margin: 0 16px;
    opacity: 0.3;
}