/* Glowing Border Effect */
.glowing-border-container {
    position: relative;
    overflow: hidden;
}

.glowing-border-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(37, 99, 235, 0.1), transparent);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.glowing-border-container:hover::before {
    opacity: 1;
}

.glowing-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glowing-border.active {
    opacity: 1;
}

.glowing-border-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(255, 0, 128, 0.5) 0%, 
        rgba(255, 140, 0, 0.4) 20%,
        rgba(255, 215, 0, 0.3) 40%,
        rgba(50, 205, 50, 0.3) 60%,
        rgba(0, 191, 255, 0.2) 80%,
        transparent 100%);
    transform: translate(-50%, -50%);
    filter: blur(40px);
    pointer-events: none;
    transition: transform 0.1s ease-out;
    animation: rainbowGlow 4s ease-in-out infinite;
}

@keyframes rainbowGlow {
    0%, 100% {
        filter: blur(40px) hue-rotate(0deg);
    }
    33% {
        filter: blur(40px) hue-rotate(120deg);
    }
    66% {
        filter: blur(40px) hue-rotate(240deg);
    }
}

.glowing-border-container .content {
    position: relative;
    z-index: 3;
    background: inherit;
    border-radius: inherit;
}

/* Apply to specific sections */
section.data-panel,
section.control-panel,
section.results-section,
section.charts-section,
.chart-card {
    position: relative;
}

/* Enhanced border for sections with glow */
section.glowing-section {
    position: relative;
    transition: all 0.3s ease;
}

/* Glowing border overlay with rainbow effect */
.glowing-border-overlay {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(90deg, 
        #ff0080 0%, 
        #ff8c00 14.28%, 
        #ffd700 28.56%, 
        #32cd32 42.84%, 
        #00bfff 57.12%, 
        #4169e1 71.4%, 
        #8b00ff 85.68%, 
        #ff0080 100%);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
    filter: blur(1px);
}

.glowing-section:hover .glowing-border-overlay {
    opacity: 0.8;
    animation: rainbowBorder 3s linear infinite;
    filter: blur(1px) brightness(1.2);
}

@keyframes rainbowBorder {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 300% 50%;
    }
}

/* Interactive glow effect for chart cards with rainbow */
.chart-card.interactive-glow {
    position: relative;
    overflow: visible;
}

.chart-card.interactive-glow::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: inherit;
    background: linear-gradient(90deg, 
        #ff0080 0%, 
        #ff8c00 14.28%, 
        #ffd700 28.56%, 
        #32cd32 42.84%, 
        #00bfff 57.12%, 
        #4169e1 71.4%, 
        #8b00ff 85.68%, 
        #ff0080 100%);
    background-size: 300% 300%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
    filter: blur(10px);
}

.chart-card.interactive-glow:hover::before {
    opacity: 0.7;
    animation: rainbowBorder 3s linear infinite;
    filter: blur(10px) brightness(1.3);
}

.chart-card.interactive-glow .glow-content {
    position: relative;
    z-index: 1;
}