/* Standardize spacing between menu items */
.pcoded-navbar .pcoded-inner-navbar li {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove extra space between parent menu items and submenu items */
.pcoded-navbar .pcoded-submenu {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Make spacing consistent between all menu items */
.pcoded-navbar .nav-item > a,
.pcoded-navbar .pcoded-submenu .nav-item > a {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Specifically target the Dataset Collection section */
.pcoded-navbar [data-username="Dataset Collection"] .pcoded-submenu,
.pcoded-navbar [data-username="Dataset Collection"] .pcoded-hasmenu {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure My Folder is properly spaced */
.pcoded-navbar [data-username="Dataset Collection"] .pcoded-submenu .pcoded-submenu {
  margin-top: 0 !important;
}

/* Universal styling for all navigation items */
.pcoded-navbar .nav-item,
.pcoded-navbar .nav-item.pcoded-hasmenu {
  background-color: transparent !important;
}

.pcoded-navbar .nav-item > a,
.pcoded-navbar .nav-item.pcoded-hasmenu > a {
  background-color: transparent !important;
}

.pcoded-navbar .nav-item:hover,
.pcoded-navbar .nav-item.pcoded-hasmenu:hover,
.pcoded-navbar .nav-item.active,
.pcoded-navbar .nav-item.pcoded-hasmenu.active {
  background-color: transparent !important;
}

.pcoded-navbar .nav-item > a:hover,
.pcoded-navbar .nav-item.pcoded-hasmenu > a:hover,
.pcoded-navbar .nav-item > a:focus,
.pcoded-navbar .nav-item.pcoded-hasmenu > a:focus {
  background-color: transparent !important;
}

/* Style for active/selected menu item */
.pcoded-navbar .nav-item.active > a,
.pcoded-navbar .nav-item.pcoded-hasmenu.active > a,
.pcoded-navbar .nav-item.pcoded-trigger > a {
  background-color: #F5FEFD !important;
}

/* Style for expanded menu */
.pcoded-navbar .nav-item.pcoded-trigger,
.pcoded-navbar .nav-item.pcoded-hasmenu.pcoded-trigger {
  background-color: transparent !important;
}

/* Style for submenu items */
.pcoded-navbar .pcoded-submenu {
  background-color: inherit !important;
}

/* Text styling for all menu items */
.pcoded-navbar .pcoded-mtext {
  color: #36454F !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: normal !important;
}

/* Remove any active menu indicators */
.pcoded-navbar .nav-item:after,
.pcoded-navbar .nav-item.active:after,
.pcoded-navbar .nav-item.pcoded-trigger:after,
.pcoded-navbar .nav-item.pcoded-hasmenu:after,
.pcoded-navbar .nav-item.pcoded-hasmenu.active:after,
.pcoded-navbar .nav-item.pcoded-hasmenu.pcoded-trigger:after {
  background-color: transparent !important;
}

/* Special styling for clicked/active menu item */
.pcoded-navbar .nav-item.active > a,
.pcoded-navbar .nav-item.pcoded-hasmenu.active > a {
  background-color: #2C3E50 !important;
}

.pcoded-navbar .nav-item.active > a .pcoded-mtext,
.pcoded-navbar .nav-item.pcoded-hasmenu.active > a .pcoded-mtext {
  color: #FFFFFF !important;
}

/* Style for active submenus */
.pcoded-navbar .pcoded-submenu .nav-item.active > a {
  background-color: #E0F7FA !important;
}

.pcoded-navbar .pcoded-submenu .nav-item.active > a span {
  color: #36454F !important;
}

/* Consistent icon sizing */
.pcoded-navbar .pcoded-micon img {
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
}

.pcoded-navbar .pcoded-micon i {
  font-size: 20px !important;
}

/* Hover effect for better UX */
.pcoded-navbar .nav-item > a:hover .pcoded-mtext,
.pcoded-navbar .nav-item.pcoded-hasmenu > a:hover .pcoded-mtext {
  color: #000000 !important;
}

/* Style specifically for the navbar-brand section */
.pcoded-navbar .navbar-brand {
  background: #F5FEFD !important;
}


/* Base styling for all menu items including submenus at any level */
.pcoded-navbar .nav-item,
.pcoded-navbar .nav-item.pcoded-hasmenu,
.pcoded-navbar .pcoded-submenu .nav-item,
.pcoded-navbar .pcoded-submenu .pcoded-submenu .nav-item {
  background-color: transparent !important;
}

/* Text styling for ALL menu text including nested submenus */
.pcoded-navbar .pcoded-mtext,
.pcoded-navbar .pcoded-submenu span,
.pcoded-navbar .pcoded-submenu .pcoded-submenu span,
.pcoded-navbar a span {
  color: #36454F !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: normal !important;
  font-size: 14px !important; /* Set consistent font size */
}

/* Target all links in the navigation */
.pcoded-navbar a,
.pcoded-navbar .pcoded-submenu a,
.pcoded-navbar .pcoded-submenu .pcoded-submenu a {
  background-color: transparent !important;
}

/* Specific styling for submenu items */
.pcoded-navbar .pcoded-submenu li,
.pcoded-navbar .pcoded-submenu .pcoded-submenu li {
  background-color: transparent !important;
  padding-left: 10px !important; /* Consistent indentation */
}

/* Hover state for all menu items including submenus */
.pcoded-navbar a:hover,
.pcoded-navbar .pcoded-submenu a:hover,
.pcoded-navbar .pcoded-submenu .pcoded-submenu a:hover {
  background-color: rgba(240, 240, 240, 0.1) !important;
}

/* Active state for all menu items including submenus */
.pcoded-navbar .nav-item.active > a,
.pcoded-navbar .pcoded-submenu .nav-item.active > a,
.pcoded-navbar .pcoded-submenu .pcoded-submenu .nav-item.active > a {
  background-color: #2C3E50 !important;
}

.pcoded-navbar .nav-item.active > a span,
.pcoded-navbar .pcoded-submenu .nav-item.active > a span {
  color: #FFFFFF !important;
}

/* Force submenu background color */
.pcoded-navbar .pcoded-submenu,
.pcoded-navbar .pcoded-submenu .pcoded-submenu {
  background-color: transparent !important;
}

/* Make sure nested text links use the proper color regardless of hierarchy */
.pcoded-navbar .pcoded-submenu .nav-item > a span,
.pcoded-navbar .pcoded-submenu .pcoded-submenu .nav-item > a span {
  color: #36454F !important;
}

/* Override active styling for submenu items specifically */
.pcoded-navbar .pcoded-submenu .nav-item.active > a {
  background-color: #E0F7FA !important; /* Light background for active submenu */
  color: #36454F !important;
}

/* Ensure consistent text color for submenu items even when active */
.pcoded-navbar .pcoded-submenu .nav-item.active > a span,
.pcoded-navbar .pcoded-submenu .nav-item > a span {
  color: #36454F !important;
}

/* Remove any dark backgrounds from submenus specifically */
.pcoded-navbar .pcoded-submenu,
.pcoded-navbar .pcoded-submenu li,
.pcoded-navbar .pcoded-submenu a {
  background-color: transparent !important;
}

/* Target the Authentication submenu specifically if needed */
.pcoded-navbar li[data-username="Authentication Sign up Sign in reset password Change password Personal information profile settings map form subscribe"] .pcoded-submenu a {
  background-color: transparent !important;
}

.pcoded-navbar li[data-username="Authentication Sign up Sign in reset password Change password Personal information profile settings map form subscribe"] .pcoded-submenu .nav-item.active > a {
  background-color: #E0F7FA !important;
}

/* Add light blue background to all submenu items */
.pcoded-navbar .pcoded-submenu li a {
  background-color: #E8F5F8 !important; /* Light blue background */
}

/* Slightly darker blue background for active/hovered submenu items */
.pcoded-navbar .pcoded-submenu li a:hover,
.pcoded-navbar .pcoded-submenu .nav-item.active > a {
  background-color: #D1EBF3 !important; /* Slightly darker blue for hover/active state */
}

/* Add blue dot indicator for active submenu items */
.pcoded-navbar .pcoded-submenu .nav-item > a:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #00BCD4; /* Blue dot color */
  display: none; /* Hide by default */
}

/* Show blue dot for active items */
.pcoded-navbar .pcoded-submenu .nav-item.active > a:before {
  display: block;
}

/* Remove blue background from all submenu items */
.pcoded-navbar .pcoded-submenu li a {
  background-color: transparent !important;
}

/* Remove blue background from hover/active submenu items too */
.pcoded-navbar .pcoded-submenu li a:hover,
.pcoded-navbar .pcoded-submenu .nav-item.active > a {
  background-color: transparent !important;
}

/* Ensure submenu containers are also transparent */
.pcoded-navbar .pcoded-submenu {
  background-color: transparent !important;
}

/* Make sure we're not leaving any specific blue backgrounds behind */
.pcoded-navbar .pcoded-submenu .nav-item,
.pcoded-navbar .pcoded-submenu .nav-item > a {
  background-color: transparent !important;
}


/* Hide blue dot by default for all submenu items */
.pcoded-navbar .pcoded-submenu .nav-item > a:before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #00BCD4; /* Blue dot color */
  display: none; /* Hide by default */
}

/* Show blue dot ONLY on hover */
.pcoded-navbar .pcoded-submenu .nav-item > a:hover:before {
  display: block; /* Show dot only on hover */
}

/* Show blue dot for active items (if you want to keep this behavior) */
.pcoded-navbar .pcoded-submenu .nav-item.active > a:before {
  display: block; /* Show dot for active items */
}

/* Add this to your custom-menu.css file */

/* Override the active state for the Home menu item specifically */
.pcoded-navbar .nav-item[data-username="dashboard Default Ecommerce CRM Analytics Crypto Project"].active > a {
  background-color: transparent !important;
}

/* Ensure text color remains visible when active */
.pcoded-navbar .nav-item[data-username="dashboard Default Ecommerce CRM Analytics Crypto Project"].active > a .pcoded-mtext {
  color: #36454F !important;
}

/* Remove any other active styling for the Home menu item */
.pcoded-navbar .nav-item[data-username="dashboard Default Ecommerce CRM Analytics Crypto Project"].active:after {
  background-color: transparent !important;
}

.pcoded-navbar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 260px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 10; /* Ensure navbar is above other content */
}

.navbar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.navbar-content.scroll-div {
    flex-grow: 1;
    overflow-y: auto;
    padding-top: 10px;

    /* Adjust masking to hide content behind the logo */
    -webkit-mask-image: linear-gradient(to bottom, transparent 50px, black 60px);
    mask-image: linear-gradient(to bottom, transparent 50px, black 60px);
}

/* Custom scrollbar for better control */
.navbar-content.scroll-div::-webkit-scrollbar {
    width: 8px;
}

.navbar-content.scroll-div::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.navbar-content.scroll-div::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.navbar-content.scroll-div::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Ensure logo stays fixed and does not overlap with scrolling content */
.navbar-logo {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 20;
    width: 100%;
}