/* 
KPI Floating Animations & Responsive Design
Enhanced by Chief Quality Enforcement Agent for perfect positioning
*/

/* Enhanced Floating KPI Animation - Stronger Movement */
@keyframes kpiFloat {
    0%, 100% { 
        transform: translateY(0px) scale(1) rotateZ(0deg);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    25% {
        transform: translateY(-15px) scale(1.03) rotateZ(1deg);
        box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    }
    50% { 
        transform: translateY(-20px) scale(1.05) rotateZ(0deg);
        box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    }
    75% {
        transform: translateY(-15px) scale(1.03) rotateZ(-1deg);
        box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    }
}

/* Enhanced floating with 3D perspective */
@keyframes kpiFloat3D {
    0%, 100% { 
        transform: translateY(0px) translateX(0px) scale(1) rotateX(0deg) rotateY(0deg);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    25% {
        transform: translateY(-12px) translateX(3px) scale(1.02) rotateX(2deg) rotateY(1deg);
        box-shadow: 0 18px 45px rgba(0,0,0,0.22);
    }
    50% { 
        transform: translateY(-18px) translateX(0px) scale(1.04) rotateX(0deg) rotateY(0deg);
        box-shadow: 0 25px 60px rgba(0,0,0,0.28);
    }
    75% {
        transform: translateY(-12px) translateX(-3px) scale(1.02) rotateX(-2deg) rotateY(-1deg);
        box-shadow: 0 18px 45px rgba(0,0,0,0.22);
    }
}

/* Enhanced KPI Badge Styling */
.kpi-badge {
    transition: all 0.3s ease;
}

.kpi-badge:hover .badge-content {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}

.kpi-badge .badge-content {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255,255,255,0.2);
}

/* DEDICATED KPI ABSOLUTE POSITIONING SYSTEM - ISOLATED & RESPONSIVE */
.kpi-network-dedicated-section {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.1);
    isolation: isolate;
}

.kpi-absolute-container {
    /* Container styles handled inline for precise control */
}

.kpi-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.3);
    /* Fixed width prevents stretching */
    min-width: 140px !important;
    max-width: 140px !important;
    width: 140px !important;
}

/* Force absolute positioning for KPI positions */
.kpi-absolute-container .kpi-position {
    position: absolute !important;
    z-index: 10 !important;
}

/* Ensure the container is positioned relative */
.kpi-absolute-container {
    position: relative !important;
    display: block !important;
}

.kpi-card:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
}

/* RESPONSIVE ABSOLUTE POSITIONING FOR ALL DEVICES */
@media (max-width: 1400px) {
    .kpi-absolute-container {
        width: 1000px !important;
        height: 700px !important;
    }
    
    .network-center-absolute {
        width: 400px !important;
        height: 400px !important;
    }
}

@media (max-width: 992px) {
    .kpi-absolute-container {
        width: 800px !important;
        height: 600px !important;
    }
    
    .network-center-absolute {
        width: 350px !important;
        height: 350px !important;
    }
    
    .network-center-absolute svg {
        width: 350px !important;
        height: 350px !important;
    }
    
    .kpi-card {
        min-width: 120px !important;
        max-width: 120px !important;
        padding: 0.75rem !important;
    }
    
    .kpi-number {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 768px) {
    .kpi-network-dedicated-section {
        min-height: 500px !important;
        padding: 2rem 0 !important;
    }
    
    .kpi-absolute-container {
        width: 600px !important;
        height: 400px !important;
    }
    
    .network-center-absolute {
        width: 240px !important;
        height: 240px !important;
    }
    
    .network-center-absolute svg {
        width: 240px !important;
        height: 240px !important;
    }
    
    .kpi-card {
        min-width: 100px !important;
        max-width: 100px !important;
        padding: 0.5rem !important;
    }
    
    .kpi-number {
        font-size: 1rem !important;
    }
    
    .kpi-label {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 576px) {
    .kpi-network-dedicated-section {
        min-height: 450px !important;
        padding: 1.5rem 0 !important;
        margin: 2rem 0 !important;
    }
    
    .kpi-absolute-container {
        width: 95% !important;
        min-width: 320px !important;
        height: 350px !important;
    }
    
    .network-center-absolute {
        width: 200px !important;
        height: 200px !important;
    }
    
    .network-center-absolute svg {
        width: 200px !important;
        height: 200px !important;
    }
    
    .kpi-card {
        min-width: 80px !important;
        max-width: 80px !important;
        padding: 0.4rem !important;
    }
    
    .kpi-number {
        font-size: 0.9rem !important;
    }
    
    .kpi-label {
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
    }
}

/* Ensure content below has proper spacing */
.kpi-network-dedicated-section + * {
    margin-top: 2rem !important;
}

/* Network animation performance optimization */
.network-inner svg {
    will-change: opacity;
    backface-visibility: hidden;
}

.kpi-float-animation {
    will-change: transform;
    backface-visibility: hidden;
}

/* Enhanced hover states */
.kpi-badge:hover {
    z-index: 15 !important;
}

.kpi-badge:hover .badge-content {
    background: rgba(255,255,255,0.98) !important;
    border-color: rgba(13, 110, 253, 0.3);
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .kpi-float-animation {
        animation: none !important;
    }
    
    .kpi-badge .badge-content {
        transition: none !important;
    }
}

/* Performance optimization for animations */
.ai-network-kpi-section {
    contain: layout style paint;
    transform: translateZ(0);
}