/* ===============================================================
   ENHANCED ROI DASHBOARD - HERO SECTION
   =============================================================== */

/* Enhanced ROI Dashboard */
.roi-dashboard-enhanced {
    animation: float-in 1.5s ease-out 0.5s both !important;
}

@keyframes float-in {
    0% {
        opacity: 0 !important;
        transform: translateX(100px) translateY(20px) !important;
    }
    100% {
        opacity: 1 !important;
        transform: translateX(0) translateY(0) !important;
    }
}

/* Dashboard Card Mini */
.dashboard-card-mini {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 20px !important;
    padding: 1.5rem !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    max-width: 420px !important;
}

.dashboard-card-mini::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.08), transparent) !important;
    transition: left 0.8s ease !important;
    animation: shimmer 4s ease-in-out infinite !important;
}

@keyframes shimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

.dashboard-card-mini:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.18) !important;
}

/* Dashboard Icon Section Mini */
.dashboard-icon-section {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.icon-container-mini {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.icon-container-mini .fas.fa-chart-line {
    color: #3b82f6 !important;
    font-size: 1.5rem !important;
    z-index: 2 !important;
    position: relative !important;
    animation: pulse-icon 2.5s ease-in-out infinite !important;
}

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

/* Progress Ring Mini */
.progress-ring-mini {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1 !important;
}

.progress-ring-svg-mini {
    transform: rotate(-90deg) !important;
}

.progress-ring-circle-mini {
    animation: draw-circle-mini 2s ease-out 1s both !important;
}

@keyframes draw-circle-mini {
    0% { stroke-dashoffset: 126; }
    100% { stroke-dashoffset: 75; /* 40% of smaller circle */ }
}

.pulse-dot-mini {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 6px !important;
    height: 6px !important;
    background: #06b6d4 !important;
    border-radius: 50% !important;
    animation: pulse-dot 2s ease-in-out infinite !important;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    50% {
        opacity: 0.6 !important;
        transform: scale(1.4) !important;
    }
}

/* Dashboard Content Mini */
.dashboard-content-mini {
    text-align: left !important;
    flex: 1 !important;
}

.roi-counter-wrapper {
    display: flex !important;
    align-items: baseline !important;
    margin-bottom: 0.5rem !important;
}

.roi-counter-number {
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: inline-block !important;
    line-height: 1 !important;
}

.roi-counter-suffix {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #3b82f6 !important;
    display: inline-block !important;
    margin-left: 0.25rem !important;
}

.roi-counter-label {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
}

.roi-counter-description {
    font-size: 0.85rem !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* ROI Counter Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Don't animate the number itself - let JavaScript handle it */
.roi-counter-number {
    opacity: 1 !important;
}

.roi-counter-suffix {
    animation: fadeInUp 1s ease-out 1.7s both !important;
}

.roi-counter-label {
    animation: fadeInUp 1s ease-out 1.9s both !important;
}

.roi-counter-description {
    animation: fadeInUp 1s ease-out 2.1s both !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .dashboard-card-mini {
        padding: 1.25rem !important;
        gap: 0.75rem !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .dashboard-content-mini {
        text-align: center !important;
    }

    .roi-counter-number {
        font-size: 2rem !important;
    }

    .roi-counter-suffix {
        font-size: 1.5rem !important;
    }

    .roi-counter-label {
        font-size: 0.9rem !important;
    }

    .roi-counter-description {
        font-size: 0.8rem !important;
    }
}