:root {
    --sidebar-bg-color: #3F4B62;
    --sidebar-dark-bg-color: #2c2c34;
    --icon-fill-color: #E5E9EB;
    --active-bg-color: #b1d86e;
    --toggle-bg-color: #8AC626;
    --active-text-color: #3F4B62;
    --brand-header-bg-color: #fff;
  }
  
  .c-sidebar-nav {
      margin-top: 1.5rem;
      background-color: var(--sidebar-bg-color); /* Sidebar background color */
  }
  
  .c-dark-theme .c-sidebar-dark .c-sidebar-nav {
      margin-top: 1.5rem;
      background-color: var(--sidebar-dark-bg-color);
  }
  
  .c-sidebar-nav-item {
      font-size: 0.75rem;
  }

  .c-sidebar-nav-link:hover {
    color: (var(--icon-fill-color));
    background-color: var(--active-bg-color) !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    
  }

  .c-sidebar-nav-dropdown-toggle:hover {
    color: (var(--icon-fill-color));
    background-color: var(--toggle-bg-color) !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  
  .c-sidebar-nav-icon {
      height: 1.39375rem;
      fill: var(--icon-fill-color);
  }
  
  .c-sidebar-nav-icon polygon,
  .c-sidebar-nav-icon path,
  .c-sidebar-nav-icon rect {
      fill: var(--icon-fill-color) !important;
  }
  
  .c-sidebar .c-sidebar-nav-link.c-active .c-sidebar-nav-icon path,
  .c-sidebar .c-sidebar-nav-link.c-active .c-sidebar-nav-icon rect,
  .c-sidebar .c-sidebar-nav-link.c-active .c-sidebar-nav-icon polygon,
  .c-sidebar .c-active.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon path,
  .c-sidebar .c-active.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon polygon,
  .c-sidebar .c-active.c-sidebar-nav-dropdown-toggle .c-sidebar-nav-icon rect {
      fill: var(--sidebar-bg-color) !important;
  }
  
  .c-sidebar .c-sidebar-minimizer {
      background-color: var(--sidebar-bg-color);
  }
  
  .c-sidebar .c-sidebar-brand, .c-sidebar .c-sidebar-header {
      background: var(--brand-header-bg-color);
  }
  
  .c-sidebar .c-sidebar-nav-link.c-active, .c-sidebar .c-active.c-sidebar-nav-dropdown-toggle {
      color: var(--active-text-color);
      background: var(--active-bg-color) !important;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
  }
  
  .c-sidebar-unfoldable .c-sidebar-nav-link.c-active, .c-sidebar .c-active.c-sidebar-nav-dropdown-toggle {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      margin-right: 0px;
  }
  
  .c-sidebar-nav-link, .c-sidebar-nav-dropdown-toggle {
      padding: 0.5222rem 1rem;
  }

  .c-active.c-sidebar-nav-dropdown-toggle {
    background-color: #546482
  }
  
 /* Hide the default CoreUI arrow */
.c-sidebar-minimizer::before {
    display: none !important;
    content: none !important;
    background-image: none !important;
  }

#pin-toggle:hover {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    cursor: auto !important;
}


#pin-icon:hover {
    filter: brightness(1.2); /* Example hover effect */
    cursor: pointer;         /* Optional: make it obvious it's clickable */
}