/* Sidebar container */
.sidebar {
    background-color: #f8f9fa;       /* light background */
    min-width: 200px;                /* fixed width */
    max-width: 220px;                /* optional max width */
    height: 100vh;                   /* full viewport height */
    position: sticky;                /* stick on scroll */
    top: 0;                          
    border-right: 1px solid #dee2e6; /* subtle right border */
    padding-top: 1rem;               
    overflow-y: auto;                /* scroll if too tall */
  }
  
  /* Sidebar nav links */
  .sidebar .nav-link {
    color: #343a40;                  /* dark text */
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;         /* rounded corners */
    transition: background-color 0.2s, color 0.2s;
  }
  
  /* Hover and focus state */
  .sidebar .nav-link:hover,
  .sidebar .nav-link:focus {
    background-color: rgba(0, 208, 148, 0.1); /* translucent green */
    color: #00D094;
    text-decoration: none;
  }
  
  /* Active link state */
  .sidebar .nav-link.active {
    background-color: #00D094;       /* main brand color */
    color: #ffffff !important;       /* white text */
  }
  
  /* Icon spacing */
  .sidebar .nav-link .bi {
    margin-right: 0.5rem;
    font-size: 1.1rem;
    vertical-align: -0.05em;
  }
  
  /* Scrollbar styling (modern browsers) */
  .sidebar::-webkit-scrollbar {
    width: 6px;
  }
  .sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  .sidebar::-webkit-scrollbar-thumb {
    background-color: #ced4da; 
    border-radius: 3px;
  }
  .sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #adb5bd;
  }
  .chart-container {
    position: relative;
    width: 100%;
    /* pick a comfortable height – 250px is usually good for dashboards */
    height: 250px; 
    margin-bottom: 1rem;
  }
  .chart-container2 {
    position: relative;
    width: 100%;
    height: 350px; /* adjust as needed */
    margin-bottom: 1rem;
  }
  /* Sidebar header */
.sidebar-header {
  background-color: #00D094;
}

/* Headings inside sidebar */
.nav-heading {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* Indented child links */
.ps-4 .nav-link {
  font-size: 0.875rem;
}

/* Ensure links fill full width and have hover effect */
.sidebar .nav-link {
  display: flex;
  align-items: center;
  color: #333;
  padding: 0.35rem 0.75rem;
}
.sidebar .nav-link:hover {
  background-color: rgba(0, 208, 148, 0.1);
  color: #00D094;
}

/* Icon spacing */
.sidebar .bi {
  font-size: 1rem;
}