/* ApexCharts Tooltip Customization for Dark Theme */
.apexcharts-tooltip {
    background-color: #2a2a2a !important; /* Dark background */
    color: #ffffff !important; /* White text */
    border: 1px solid #444444 !important; /* Subtle border for better visibility */
    border-radius: 6px !important; /* Rounded corners */
    padding: 10px !important; /* Comfortable padding */
    font-family: 'Inter', sans-serif; /* Match the site's font */
    font-size: 14px !important; /* Adjust text size */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important; /* Add shadow for depth */
}

/* Adjust tooltip title (if any) */
.apexcharts-tooltip-title {
    background-color: #1e1e1e !important; /* Slightly darker title background */
    color: #ffcc00 !important; /* Highlighted title text */
    padding: 8px 10px !important; /* Consistent padding */
    font-weight: bold !important; /* Make the title stand out */
    border-bottom: 1px solid #444444 !important; /* Add separation */
}

.apexcharts-tooltip-marker {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    margin-right: 8px !important; /* Space between marker and text */
}

/* Tooltip text alignment */
.apexcharts-tooltip-text {
    line-height: 1.5 !important; /* Improve readability */
}

.apexcharts-menu {
    background-color: #fff !important;
}

body[data-leftbar-theme="dark"] .apexcharts-menu {
    background-color: #2a2a2a !important;
}

.apexcharts-menu.apexcharts-menu-open {
    background-color: #fff !important;
}

body[data-leftbar-theme="dark"] .apexcharts-menu.apexcharts-menu-open {
    background-color: #2a2a2a !important;
}