/* animated-bg.css */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 50%, #2a2f3e 100%);
    overflow: hidden; /* Prevent any canvas overflow */
}

#chartCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block; /* Remove inline spacing */
}

/* Ensure your content appears above the background */
body {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Content overlay for better readability */
.content-overlay {
    backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
}

/* Responsive breakpoints */
@media screen and (max-width: 1200px) {
    .content-overlay {
        backdrop-filter: blur(1px);
        background: rgba(0, 0, 0, 0.15);
    }
}

@media screen and (max-width: 768px) {
    .content-overlay {
        backdrop-filter: blur(1px);
        background: rgba(0, 0, 0, 0.2);
        padding: 0.75rem;
        margin: 0.75rem;
        border-radius: 6px;
    }
    
    /* Ensure the background doesn't interfere with touch interactions */
    .animated-background {
        touch-action: none;
        pointer-events: none;
    }
}

@media screen and (max-width: 480px) {
    .content-overlay {
        backdrop-filter: blur(0.5px);
        background: rgba(0, 0, 0, 0.25);
        padding: 0.5rem;
        margin: 0.5rem;
        border-radius: 4px;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    #chartCanvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: pixelated;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .animated-background {
        animation: none;
    }
    
    #chartCanvas {
        opacity: 0.5;
    }
}

/* Dark mode compatibility */
@media (prefers-color-scheme: dark) {
    .animated-background {
        background: linear-gradient(135deg, #0a0f14 0%, #151a28 50%, #1f2433 100%);
    }
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
    .animated-background {
        background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 50%, #cbd5e0 100%);
        opacity: 0.3;
    }
}

/* Landscape orientation adjustments for mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .content-overlay {
        padding: 0.5rem;
        margin: 0.5rem;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Very small screens (older phones) */
@media screen and (max-width: 320px) {
    .animated-background {
        background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
    }
    
    .content-overlay {
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.3);
        padding: 0.25rem;
        margin: 0.25rem;
    }
}

/* Large screens optimization */
@media screen and (min-width: 1920px) {
    .content-overlay {
        backdrop-filter: blur(3px);
        background: rgba(0, 0, 0, 0.08);
    }
}

/* Print styles */
@media print {
    .animated-background {
        display: none;
    }
}