.interactive-row {
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
}

.interactive-row:hover {
    background-color: rgba(255, 215, 0, 0.1) !important;
    /* Removed transform and box-shadow on TR to prevent table layout breaks */
}

.interactive-row td:first-child {
    position: relative;
    transition: transform 0.2s ease-in-out;
}

.interactive-row:hover td:first-child {
    transform: translateX(-5px);
    /* Move only the text of the first cell */
}

.interactive-row:hover td:first-child::after {
    content: '←';
    position: absolute;
    left: -20px;
    /* Position to the left of the text */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    animation: fadeIn 0.3s forwards;
    color: #ffd700;
    font-weight: bold;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

/* Ensure no conflict with dark mode text */
body.dark-theme .interactive-row:hover td {
    color: inherit;
}