/* ============================================
   LIVE UPDATES ANIMATIONS & STYLES
   ============================================ */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Slide In From Top */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide In From Right */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Pulse Animation */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Shimmer Loading Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

/* Scale In Animation */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce In Animation */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

/* Glow Pulse */
@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(199, 255, 46, 0.3);
    }

    50% {
        box-shadow: 0 0 20px rgba(199, 255, 46, 0.6);
    }
}

/* Counter Update Flash */
@keyframes counterFlash {

    0%,
    100% {
        color: inherit;
    }

    50% {
        color: #c7ff2e;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* New Entry Animations */
.new-entry {
    animation: slideInFromTop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.new-entry-fade {
    animation: fadeIn 0.5s ease-out;
}

.new-entry-scale {
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.new-entry-bounce {
    animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Live Indicator */
.live-indicator {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.live-glow {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Counter Update */
.counter-update {
    animation: counterFlash 0.3s ease-in-out;
}

/* Shimmer Effect for Loading */
.shimmer {
    background: linear-gradient(to right,
            #161a0d 0%,
            #212912 20%,
            #161a0d 40%,
            #161a0d 100%);
    background-size: 1000px 100%;
    animation: shimmer 2s linear infinite;
}

/* ============================================
   DUMMY MODE BANNER
   ============================================ */

.dummy-mode-banner {
    background: linear-gradient(135deg, #c7ff2e 0%, #a4d924 100%);
    color: #0a0c05;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: fixed;
    top: 64px;
    /* Below header */
    left: 0;
    right: 0;
    z-index: 40;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    animation: slideInFromTop 0.3s ease-out;
}

.dummy-mode-banner::before {
    content: '⚠️ ';
    margin-right: 0.5rem;
}

/* ============================================
   TOGGLE BUTTON STYLES
   ============================================ */

.dummy-toggle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid #2d3617;
    background: #161a0d;
    color: #bdce8d;
}

.dummy-toggle-btn:hover {
    background: #212912;
    border-color: #c7ff2e;
    color: #c7ff2e;
}

.dummy-toggle-btn.active {
    background: #c7ff2e;
    border-color: #c7ff2e;
    color: #0a0c05;
}

.dummy-toggle-btn.active::before {
    content: '●';
    color: #22c55e;
    animation: pulse 1.5s ease-in-out infinite;
}

/* ============================================
   NOTIFICATION BADGES
   ============================================ */

.notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #c7ff2e;
    color: #0a0c05;
    animation: scaleIn 0.2s ease-out;
}

.notification-badge.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

.smooth-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.smooth-color-transition {
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* ============================================
   HIGHLIGHT FLASH
   ============================================ */

@keyframes highlightFlash {
    0% {
        background-color: rgba(199, 255, 46, 0);
    }

    50% {
        background-color: rgba(199, 255, 46, 0.1);
    }

    100% {
        background-color: rgba(199, 255, 46, 0);
    }
}

.highlight-flash {
    animation: highlightFlash 1s ease-out;
}

/* ============================================
   STATS COUNTER ANIMATIONS
   ============================================ */

.stat-number {
    display: inline-block;
    transition: transform 0.2s ease;
}

.stat-number.incrementing {
    animation: counterFlash 0.3s ease-in-out;
}

.stat-increase {
    color: #22c55e !important;
}

.stat-decrease {
    color: #ef4444 !important;
}

/* ============================================
   TABLE ROW ANIMATIONS
   ============================================ */

tbody tr.new-row {
    animation: slideInFromTop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(199, 255, 46, 0.05);
}

tbody tr.new-row:hover {
    background: rgba(199, 255, 46, 0.08);
}

/* Remove highlight after animation */
@keyframes removeHighlight {
    from {
        background-color: rgba(199, 255, 46, 0.05);
    }

    to {
        background-color: transparent;
    }
}

tbody tr.fade-highlight {
    animation: removeHighlight 2s ease-out forwards;
}

/* ============================================
   LOADING SKELETON
   ============================================ */

.skeleton {
    background: linear-gradient(90deg,
            #161a0d 25%,
            #212912 50%,
            #161a0d 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.25rem;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

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

@media (max-width: 768px) {
    .dummy-mode-banner {
        font-size: 0.625rem;
        padding: 0.375rem 0.75rem;
    }

    .dummy-toggle-btn {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}