.tooltip-custom {
    /* position: relative;
    display: inline-flex;
    align-items: center;*/
    cursor: pointer;
}

.tooltip-custom .tooltip-text {
        visibility: hidden;
        background: linear-gradient(140deg, rgba(37, 99, 235, 0.95), var(--segment-primary));
        color: #fff;
        text-align: center;
        padding: 6px 12px;
        border-radius: 4px;
        position: absolute;
        z-index: 2;
        transform: translateX(-75%) translateY(-0.5rem);
        white-space: pre-line;
        width: 250px;
        box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.35);
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
        
    }

    .tooltip-custom:hover .tooltip-text,
    .tooltip-custom:focus-within .tooltip-text {
        visibility: visible;
        opacity: 1;
        transform: translateX(-75%) translateY(0.1rem);
    }