/**
 * Styles pour la page Opérations
 * Gère l'affichage du tableau, des tooltips, des badges et du date picker personnalisé
 */

/* ============================================
   TOOLTIPS
   ============================================ */

/* Tooltips généraux - affichage au survol */
.operation-limit-tooltip:hover .position-absolute,
.clear-date-tooltip:hover .position-absolute,
.urgent-icon-tooltip:hover .position-absolute,
.notif-badge-tooltip:hover .position-absolute,
.delete-btn-tooltip:hover .position-absolute,
.comment-tooltip:hover .position-absolute,
.comment-input-tooltip:hover .position-absolute {
    display: block !important;
}

/* Container pour éviter le débordement */
.operation-limit-tooltip {
    overflow: visible !important;
}

/* ============================================
   ANIMATION PULSE POUR BOUTON RESET
   ============================================ */

/* Animation pulse subtile pour le bouton reset des filtres */
.pulse-on-active {
    animation: gentle-pulse 2s ease-in-out infinite;
}

@keyframes gentle-pulse {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.05); 
    }
}

/* ============================================
   DATE PICKER PERSONNALISÉ
   ============================================ */

/* Wrapper du date picker */
.date-picker-wrapper {
    max-width: 135px;
    cursor: pointer;
}

/* Input d'affichage de la date (formaté DD/MM/YYYY) */
.date-picker-wrapper input[type="text"] {
    padding-right: 32px;
    cursor: pointer;
}

/* Input date invisible utilisé pour le picker natif */
.date-picker-wrapper input[type="date"] {
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Icône calendrier */
.date-picker-wrapper .bi-calendar3 {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.9rem;
    z-index: 1;
}

/* ============================================
   BADGES BANQUES & COMPTES
   ============================================ */

/* Note : Les badges .bg-bourso, .bg-hellobank, .bg-compte-* 
   sont définis dans main.css avec les couleurs officielles */

/* ============================================
   OPÉRATIONS LIÉES (VIREMENTS INTERNES)
   ============================================ */

/* Bordure colorée pour identifier les opérations liées */
.operation-linked {
    border-left-width: 3px !important;
    border-left-style: solid !important;
}

/* Icône de liaison cliquable */
.linked-operation-icon {
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.linked-operation-icon:hover {
    transform: scale(1.2);
}

/* ============================================
   ALERTES & NOTIFICATIONS
   ============================================ */

/* Ligne en alerte (date dépassée) */
.table-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

/* Ligne en avertissement (J-2) */
.table-warning {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Sur mobile, ajuster la largeur du date picker */
@media (max-width: 768px) {
    .date-picker-wrapper {
        max-width: 120px;
    }
}