/* ==========================================================================
   PREMIUM STAT CARDS SYSTEM - GLOBAL
   ========================================================================== */

/* Main card properties */
.stat-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}



/* Float-end icons */
.stat-icon {
    font-size: 3rem;
    opacity: 0.25;
    position: absolute;
    right: 20px;
    bottom: 20px;
    transition: all 0.3s ease;
    color: #ffffff !important;
}

/* Number animation */
.stat-number {
    animation: countUp 1s ease-out;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

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

/* Hover lift and elevation */
.hover-elevate-up {
    transition: all 0.3s ease;
}

.hover-elevate-up:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Standard small stat number size */
.stat-small {
    font-size: 1.8rem;
    font-weight: 700;
}

/* Premium HSL and solid gradient color presets mapped to stat-card */
.stat-card.gradient-indigo,
.gradient-indigo {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
}

.stat-card.gradient-green,
.gradient-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.stat-card.gradient-cyan,
.gradient-cyan {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
}

.stat-card.gradient-orange,
.gradient-orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

.stat-card.gradient-blue,
.gradient-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.stat-card.gradient-red,
.gradient-red {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.stat-card.gradient-purple,
.gradient-purple {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
}

.stat-card.gradient-pink,
.gradient-pink {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
}

.stat-card.gradient-teal,
.gradient-teal {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
}

.stat-card.gradient-amber,
.gradient-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
}

/* Floating animation for icons */
@keyframes float-icon {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
}

.floating {
    animation: float-icon 2.5s ease-in-out infinite;
}