/**
 * Styles pour les opérations de virement interne liées
 * Gestion de la visualisation des liens avec palette de couleurs
 */

/* ============================================
   Opérations liées - Bordures colorées
   ============================================ */
tr.operation-linked {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover sur une opération liée : highlight subtil */
tr.operation-linked:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ============================================
   Animation de highlight lors de la navigation
   ============================================ */
@keyframes highlightFlash {
    0% { 
        background-color: transparent; 
        box-shadow: none;
        transform: scale(1);
    }
    15% {
        background-color: rgba(255, 193, 7, 0.4);
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.6), inset 0 0 10px rgba(255, 193, 7, 0.4);
        transform: scale(1.01);
    }
    50% { 
        background-color: rgba(255, 193, 7, 0.25);
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.4), inset 0 0 8px rgba(255, 193, 7, 0.3);
        transform: scale(1);
    }
    85% {
        background-color: rgba(255, 193, 7, 0.15);
        box-shadow: 0 0 5px rgba(255, 193, 7, 0.2), inset 0 0 5px rgba(255, 193, 7, 0.2);
        transform: scale(1);
    }
    100% {
        background-color: transparent; 
        box-shadow: none;
        transform: scale(1);
    }
}

.operation-highlight-flash {
    animation: highlightFlash 2.5s ease-in-out 1;
    position: relative;
    z-index: 10;
}

/* ============================================
   Icône de lien (bi-link-45deg)
   ============================================ */
.linked-operation-icon {
    transition: transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
    font-size: 1.1rem;
    vertical-align: middle;
}

.linked-operation-icon:hover {
    transform: scale(1.2) rotate(15deg);
    opacity: 0.8;
}

/* ============================================
   Responsive - Version mobile
   ============================================ */
@media (max-width: 768px) {
    .linked-operation-icon {
        font-size: 1rem;
    }
    
    /* Bordure plus visible sur mobile */
    tr.operation-linked {
        border-left-width: 4px !important;
    }
}

/* ============================================
   Tooltip Bootstrap pour l'icône de lien
   ============================================ */
.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    max-width: 250px;
    text-align: left;
}

/* ============================================
   États visuels pour les virements liés
   ============================================ */
/* Pas de lien visible = bordure transparente */
tr:not(.operation-linked) {
    border-left: 3px solid transparent;
}

/* Assure que la bordure reste visible en mode sombre */
@media (prefers-color-scheme: dark) {
    tr.operation-linked:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
}