/* 
 * Live Notifications Highlighting System
 * Provides visual feedback for new and updated items with time-based animations
 * RED theme for new items (N), YELLOW theme for updated items (R)
 */

/* ============================================
   BASE HIGHLIGHT CLASSES
   ============================================ */

/* New items - Red theme */
tr.highlight-new,
tr.highlight-new > th,
tr.highlight-new > td {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

tr.highlight-new {
    border-left: 4px solid #dc3545 !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Updated items - Yellow theme */
tr.highlight-updated,
tr.highlight-updated > th,
tr.highlight-updated > td {
    background-color: rgba(255, 193, 7, 0.15) !important;
}

tr.highlight-updated {
    border-left: 4px solid #ffc107 !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ============================================
   ANIMATION STAGE CLASSES
   ============================================ */

/* Stage 1: Pulse animation (0-10 seconds) */
tr.highlight-pulse.highlight-new,
tr.highlight-pulse.highlight-new > th,
tr.highlight-pulse.highlight-new > td {
    animation: pulse-new 2s ease-in-out infinite;
}

tr.highlight-pulse.highlight-updated,
tr.highlight-pulse.highlight-updated > th,
tr.highlight-pulse.highlight-updated > td {
    animation: pulse-updated 2s ease-in-out infinite;
}

/* Stage 2: Static highlight (10-55 seconds) */
tr.highlight-static {
    /* Static state - uses base highlight class colors */
}

/* Stage 3: Fade out (55-60 seconds) - Fade highlight color only, keep text readable */
tr.highlight-fade.highlight-new,
tr.highlight-fade.highlight-new > th,
tr.highlight-fade.highlight-new > td {
    animation: fadeOutRed 5s ease-out forwards;
}

tr.highlight-fade.highlight-updated,
tr.highlight-fade.highlight-updated > th,
tr.highlight-fade.highlight-updated > td {
    animation: fadeOutYellow 5s ease-out forwards;
}

tr.highlight-fade {
    border-left-color: transparent !important;
    transition: border-left-color 5s ease-out;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Red pulse animation for new items */
@keyframes pulse-new {
    0% {
        background-color: rgba(220, 53, 69, 0.2);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% {
        background-color: rgba(220, 53, 69, 0.45);
        box-shadow: 0 0 0 15px rgba(220, 53, 69, 0),
                    inset 0 0 20px rgba(220, 53, 69, 0.3);
    }
    100% {
        background-color: rgba(220, 53, 69, 0.2);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* Yellow pulse animation for updated items */
@keyframes pulse-updated {
    0% {
        background-color: rgba(255, 193, 7, 0.2);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    50% {
        background-color: rgba(255, 193, 7, 0.45);
        box-shadow: 0 0 0 15px rgba(255, 193, 7, 0),
                    inset 0 0 20px rgba(255, 193, 7, 0.3);
    }
    100% {
        background-color: rgba(255, 193, 7, 0.2);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

/* Fade out red background only (keep text visible) */
@keyframes fadeOutRed {
    0% {
        background-color: rgba(220, 53, 69, 0.15);
    }
    100% {
        background-color: transparent;
    }
}

/* Fade out yellow background only (keep text visible) */
@keyframes fadeOutYellow {
    0% {
        background-color: rgba(255, 193, 7, 0.15);
    }
    100% {
        background-color: transparent;
    }
}

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

/* Reduce animation intensity on mobile devices */
@media (max-width: 768px) {
    .highlight-pulse.highlight-new,
    .highlight-pulse.highlight-updated {
        animation-duration: 3s; /* Slower pulse on mobile */
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    tr.highlight-pulse.highlight-new,
    tr.highlight-pulse.highlight-new > th,
    tr.highlight-pulse.highlight-new > td,
    tr.highlight-pulse.highlight-updated,
    tr.highlight-pulse.highlight-updated > th,
    tr.highlight-pulse.highlight-updated > td {
        animation: none;
    }
    
    tr.highlight-fade.highlight-new,
    tr.highlight-fade.highlight-new > th,
    tr.highlight-fade.highlight-new > td,
    tr.highlight-fade.highlight-updated,
    tr.highlight-fade.highlight-updated > th,
    tr.highlight-fade.highlight-updated > td {
        animation: none;
        transition: background-color 1s ease-out;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    tr.highlight-new,
    tr.highlight-new > th,
    tr.highlight-new > td,
    tr.highlight-updated,
    tr.highlight-updated > th,
    tr.highlight-updated > td {
        background-color: transparent !important;
        border-left: none !important;
        animation: none !important;
    }
}