/* Sidebar Styles */
#sidebarMenu {
  position: fixed;
  top: 60px;
  left: 0;
  width: 260px;
  height: calc(100% - 60px); /* Adjust height based on navbar */
  background: linear-gradient(
    to bottom,
    #6a0572,
    #282f86
  ); /* Gradient background */
  overflow-y: auto; /* Allow scrolling */
  color: #fff;
  transform: translateX(-260px); /* Sidebar hidden by default */
  transition: transform 0.3s ease-in-out; /* Smooth transition */
  z-index: 2000; /* Ensure it is above other content */
}

#sidebarMenu.active {
  transform: translateX(0); /* Show sidebar when active */
}

.sidebar ul li {
  width: 100%;
  list-style: none;
  transition:
    background 0.3s ease,
    transform 0.3s ease; /* Smooth transition */
}

.sidebar ul li:hover {
  background-color: rgba(241, 236, 236, 0.05); /* Same hover background color */
  transform: scale(1.05); /* Slightly enlarge the item on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow for depth */
}

.sidebar ul li:hover a {
  color: #ffffff; /* Change text color to white on hover */
  transition: color 0.3s ease; /* Smooth color transition */
}

.sidebar ul li a {
  width: 100%;
  text-decoration: none;
  color: #fff; /* Default text color */
  height: 60px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease; /* Smooth color transition */
}

.sidebar ul li a i {
  min-width: 60px;
  font-size: 24px;
  text-align: center;
  transition: color 0.3s ease; /* Smooth icon color transition */
}

/* Sidebar Links */
#sidebarMenu .nav-link {
  display: flex;
  align-items: center;
  font-size: 1.1rem; /* Increase text size */
  padding: 15px;
  gap: 10px; /* Add space between the icon and the text */
  color: #fff;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

/* For moving the sidebar icons */

#sidebarMenu .nav-link i {
  min-width: 40px; /* Decrease this value to move the icon closer to the edge */
  padding-left: 5px; /* Add this to move the icon slightly to the left */
  margin-right: 20px; /* Increase this value to add more space */
}

#sidebarMenu .nav-link:hover {
  background-color: rgba(241, 236, 236, 0.1); /* Highlight on hover */
  transform: scale(1.05); /* Slight zoom effect */
}

/* Main Content */
.main-content {
  margin-left: 0; /* Default margin when sidebar is hidden */
  transition: margin-left 0.3s ease-in-out; /* Smooth transition */
  width: 100%; /* Default full width */
  max-width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  display: flex;
  flex-direction: column;
}

.main-content.sidebar-visible {
  margin-left: 260px; /* Shift content when sidebar is visible */
  width: calc(100% - 260px); /* Adjust width based on sidebar */
}

/* Dashboard Container (Including Charts) */
.dashboard-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* Prevent overflow */
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease-in-out;
}

.charts {
  display: grid; /* Use grid layout */
  grid-template-columns: 2fr 1fr 1fr; /* Line chart takes more space */
  gap: 20px; /* Space between charts */
  width: 100%;
  transition: width 0.3s ease-in-out;
}

/* Individual chart containers */
.chart {
  width: 100%; /* Ensure charts fit their containers */
  min-width: 0;
  box-sizing: border-box;
}

/* Ensure canvases scale properly */
.chart canvas {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
  #sidebarMenu {
    transform: translateX(
      -260px
    ); /* Sidebar hidden by default on small screens */
  }

  #sidebarMenu.active {
    transform: translateX(0); /* Show sidebar on small screens when active */
  }

  .main-content {
    margin-left: 0; /* Reset margin on small screens */
    width: 100%; /* Ensure full width on small screens */
  }

  .main-content.sidebar-visible {
    margin-left: 0; /* Sidebar overlaps main content on small screens */
    width: 100%; /* No adjustment needed */
  }

  .charts {
    grid-template-columns: 1fr; /* Stack charts vertically on small screens */
  }
}

/* THEME OVERRIDES  */

html.dark-theme .sidebar,
body.dark-theme .sidebar {
  background: #1e1e2e !important; /* Dark background for sidebar */
  color: #00cccc !important; /* Teal text color */
}

html.dark-theme .sidebar ul li a,
body.dark-theme .sidebar ul li a {
  color: #00cccc !important; /* Teal text color for links */
}

html.dark-theme .sidebar ul li:hover,
body.dark-theme .sidebar ul li:hover {
  background: rgba(0, 204, 204, 0.3); /* Slight teal hover effect */
  color: #ffffff !important; /* White text on hover */
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Darker shadow for depth */
}

html.dark-theme .sidebar ul li:hover a,
body.dark-theme .sidebar ul li:hover a {
  color: #ffffff !important; /* White text on hover */
}

/* Yellow Theme Sidebar with Darker Background */
html.yellow-theme .sidebar,
body.yellow-theme .sidebar {
  background: #0e0e0e !important; /* Darker black/grey background */
  color: #f6e05e !important; /* Yellow text color */
}

html.yellow-theme .sidebar ul li a,
body.yellow-theme .sidebar ul li a {
  color: #f6e05e !important; /* Yellow text color for links */
  transition: color 0.3s ease; /* Smooth transition for hover effects */
}

html.yellow-theme .sidebar ul li:hover,
body.yellow-theme .sidebar ul li:hover {
  background: rgba(
    246,
    224,
    94,
    0.1
  ) !important; /* Slight yellow hover effect */
  transform: scale(1.05); /* Slightly enlarge the item on hover */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Add a subtle shadow for depth */
}

html.yellow-theme .sidebar ul li:hover a,
body.yellow-theme .sidebar ul li:hover a {
  color: #ffffff !important; /* White text on hover for better contrast */
  transition: color 0.3s ease; /* Smooth color transition */
}

/* Main Content Adjustments for Yellow Theme with Darker Background */
html.yellow-theme .main-content,
body.yellow-theme .main-content {
  background: #0e0e0e !important; /* Darker black/grey background similar to the image */
  color: #f6e05e; /* Yellow text color */
}

/* Cards Shadow and Hover Effect for Darker Background */
html.yellow-theme .card:hover,
body.yellow-theme .card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7); /* Darker shadow on hover */
}

/* Light Theme Sidebar with Light Grey Background */
html.light-theme .sidebar,
body.light-theme .sidebar {
  background: #f0f0f0 !important; /* Light grey background */
  color: #333333 !important; /* Dark grey text color */
}

html.light-theme .sidebar ul li a,
body.light-theme .sidebar ul li a {
  color: #333333 !important; /* Dark grey text color for links */
  transition: color 0.3s ease; /* Smooth transition for hover effects */
}

html.light-theme .sidebar ul li:hover,
body.light-theme .sidebar ul li:hover {
  background: rgba(
    0,
    0,
    0,
    0.05
  ) !important; /* Slight dark grey hover effect */
  transform: scale(1.05); /* Slightly enlarge the item on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Cards Shadow and Hover Effect for Light Theme */
html.light-theme .card:hover,
body.light-theme .card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Slightly darker shadow on hover */
}