tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: "#C5CAE9", // Lightest shade
          200: "#9FA8DA", // Lighter shade
          300: "#7986CB", // Mid-light shade
          400: "#3F51B5", // Base color (your original color)
          500: "#3949AB", // Slightly darker shade
          600: "#303F9F", // Dark shade
          700: "#283593", // Very dark shade
          800: "#1A237E", // Near-black shade
          900: "#0D1B57", // Darkest shade (near black)
        },
      },
    },
  },
};

lucide.createIcons();
AOS.init({
  once: true, // animations will occur only once on page load
});

document.addEventListener("DOMContentLoaded", function () {
  const ctx = document.getElementById("myBarChart").getContext("2d");

  new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      datasets: [
        {
          label: "Dataset 1",
          data: [12, 19, 3, 5, 8, 3, 7, 11, 5, 8, 13, 15],
          backgroundColor: "rgba(54, 162, 235, 0.6)", // Blue
          borderColor: "rgba(54, 162, 235, 1)",
          borderWidth: 1,
        },
        {
          label: "Dataset 2",
          data: [7, 11, 5, 8, 13, 15, 12, 19, 3, 5, 8, 3],
          backgroundColor: "rgba(255, 99, 132, 0.6)", // Red
          borderColor: "rgba(255, 99, 132, 1)",
          borderWidth: 1,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false, // Must be false to allow height changes
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });
});

function changeTab(index) {
  let tabs = document.querySelectorAll('.tab');
  let contents = document.querySelectorAll('.tab-content');
  let indicator = document.querySelector('.indicator');

  tabs.forEach((tab, i) => {
      tab.classList.toggle('active', i === index);
      contents[i].classList.toggle('active', i === index);
  });

  indicator.style.transform = `translateX(${index * 100}%)`;
}