/* styles.css */


#chart-container {
    position: relative;
    width: 100%;
    padding-top: 100%;
    max-width: 1000px; 
    margin: 0 auto;
}

/* Position the SVG absolutely within the container */
#chart-container svg {
    position: absolute;
    top: 0;
    left: 0;
}

/* Table Container Styling */
#table-container {
    overflow-x: auto;
}

/* Optional: Fixed header for table */
.table-fixed thead tr th {
    position: sticky;
    top: 0;
    background-color: #f8fafc;
    z-index: 1;
}

@media (max-width: 640px) {
    .legend {
        transform: translate(0, -radius - 50);
    }
}

.tooltip {
    position: absolute;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.875rem;
    background: rgba(59, 130, 246, 0.9);
    color: white;
    border-radius: 0.375rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Define the keyframe animation for rotating background */
@keyframes rotateBackground {
    0% {
        background-image: url('images/bgop1.avif');
    }
    25% {
        background-image: url('images/bgop2.avif');
    }
    50% {
        background-image: url('images/bgop3.avif');
    }
    75% {
        background-image: url('images/bgop4.avif');
    }
    100% {
        background-image: url('images/bgop1.avif');
    }
}

/* Apply the rotating background animation */
.rotating-bg {
    position: relative;
    animation: rotateBackground 20s infinite ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Darker overlay for better text readability */
.rotating-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 1;
}

/* Ensure the content is above the overlay */
.rotating-bg * {
    position: relative;
    z-index: 2;
}

/* Apply the rotating background animation */
.rotating-bg2 {
    animation: rotateBackground 20s infinite ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Darker overlay for better text readability */
.rotating-bg2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* Ensure the content is above the overlay */
.rotating-bg2 * {
    position: relative;
    z-index: 2;
}

/* Tooltip styling using Tailwind's @apply directive */
  .tooltip {
    @apply absolute text-center p-2 text-sm bg-blue-100 border border-gray-300 rounded shadow-lg pointer-events-none opacity-0 transition-opacity duration-300;
}

/* Ensure the chart container maintains a square aspect ratio */
#chart {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Position the SVG absolutely within the container */
#chart svg {
    margin: 0 auto;
}

 /* Tooltip styling */
 .tooltip {
    position: absolute;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.875rem;
    background: rgba(59, 130, 246, 0.9); 
    color: white;
    border-radius: 0.375rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}