/**
 * Dashboard Animations
 * CSS animations and transitions for interactive dashboard elements.
 * Dash automatically loads CSS files from the assets/ folder.
 */

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */

.card {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Disable hover animation for cards inside other cards (nested) */
.card .card:hover {
    transform: none;
    box-shadow: none;
}


/* ============================================
   CARD ENTRANCE ANIMATIONS
   ============================================ */

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: slideUpFade 0.5s ease-out forwards;
}

/* Stagger delays for stat card rows */
.stat-row > div:nth-child(1) .stat-card { animation-delay: 0.0s; }
.stat-row > div:nth-child(2) .stat-card { animation-delay: 0.1s; }
.stat-row > div:nth-child(3) .stat-card { animation-delay: 0.15s; }
.stat-row > div:nth-child(4) .stat-card { animation-delay: 0.2s; }
.stat-row > div:nth-child(5) .stat-card { animation-delay: 0.25s; }
.stat-row > div:nth-child(6) .stat-card { animation-delay: 0.3s; }

/* Initial state for animated cards (prevents flash) */
.stat-card {
    opacity: 0;
    animation: slideUpFade 0.5s ease-out forwards;
}


/* ============================================
   CHART CONTAINER ANIMATIONS
   ============================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.js-plotly-plot {
    animation: fadeIn 0.4s ease-out;
}


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

.table tbody tr {
    transition: background-color 0.15s ease;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 116, 217, 0.08);
}


/* ============================================
   BUTTON INTERACTIONS
   ============================================ */

.btn {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn:active {
    transform: scale(0.98);
}

.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(0, 116, 217, 0.3);
}


/* ============================================
   BADGE ANIMATIONS
   ============================================ */

.badge {
    transition: transform 0.2s ease;
}

.badge:hover {
    transform: scale(1.05);
}


/* ============================================
   COLLAPSE/HELP PANEL TRANSITIONS
   ============================================ */

.collapse {
    transition: height 0.3s ease-out;
}


/* ============================================
   DROPDOWN ANIMATIONS
   ============================================ */

.Select-menu-outer {
    animation: slideUpFade 0.2s ease-out;
}


/* ============================================
   LOADING STATE PULSE
   ============================================ */

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.loading-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}