/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.8);
}

/* Animations */
@keyframes flash {
    0% {
        background-color: rgba(59, 130, 246, 0.2);
    }

    100% {
        background-color: transparent;
    }
}

.flash-highlight {
    animation: flash 1s ease-out forwards;
}

/* Active Segment State */
.segment-card {
    transition: all 0.2s ease;
}

.segment-card.active {
    border-color: #3b82f6 !important;
    /* primary-500 */
    background-color: rgba(59, 130, 246, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateX(4px);
}

:is(.dark) .segment-card.active {
    background-color: rgba(59, 130, 246, 0.1);
}

.element-row:hover .element-value {
    color: #2563eb;
    /* primary-600 */
}

:is(.dark) .element-row:hover .element-value {
    color: #60a5fa;
    /* primary-400 */
}