@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 0, 0, 0;
        --background-end-rgb: 0, 0, 0;
    }
}

body {
    color: rgb(var(--foreground-rgb));
    background: linear-gradient(
            to bottom,
            transparent,
            rgb(var(--background-end-rgb))
        )
        rgb(var(--background-start-rgb));
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

/* Custom scrollbar styles */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #090916;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #01a0e0;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #0671c0;
}

/* Ensure Recharts tooltips are visible */
.recharts-tooltip-wrapper {
    pointer-events: auto !important;
    z-index: 1000 !important;
}

.recharts-tooltip-content {
    pointer-events: auto !important;
    z-index: 1000 !important;
}

.recharts-tooltip-item {
    pointer-events: auto !important;
}
