/*----------------------------------
    SIDEBAR PERFECCIONADO (PREMIUM BLACK STYLE)
----------------------------------*/
/* Reconstructing with a deep onyx black aesthetic and sharp typography */

#sidebar {
  min-width: 300px !important;
  max-width: 300px !important;
  width: 300px !important;
  /* Premium Onyx Black with Glassmorphism */
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
  height: 100vh !important;
  position: fixed !important;
  z-index: 1040 !important;
  display: flex !important;
  flex-direction: column !important;
  left: 0 !important;
  top: -3px !important;
  border-right: none !important;
  /* Ensure top overlap for seamless look */
  z-index: 1040 !important;
}

#sidebar.collapsed {
  margin-left: -300px !important;
}

.sidebar-header {
  padding: 1.2rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--nav-border) !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

.sidebar-header .logo-text {
  font-size: 1.8rem !important;
  font-family: "Nunito", sans-serif !important;
  font-weight: 800 !important;
  color: var(--nav-hover-text) !important;
  margin: 0 !important;
  letter-spacing: -0.8px !important;
  text-shadow: 0 0 15px var(--nav-accent-vibrant) !important;
}

#sidebar .scroll-sidebar {
  flex-grow: 1 !important;
  overflow-y: auto !important;
  padding-bottom: 120px !important;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  overscroll-behavior: contain;
  /* Prevents scroll chaining to content */
}

#sidebar .scroll-sidebar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

.gp-nav-category {
  padding: 8px 25px 5px !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--nav-text-muted) !important;
  margin-top: 0.5rem !important;
  background: transparent !important;
  font-family: "Poppins", sans-serif !important;
}

#sidebar ul#sidebarnav-modern li a {
  padding: 8px 23px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--nav-text) !important;
  font-weight: 600 !important;
  /* Made bold for readability */
  margin: 4px 15px !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  position: relative !important;
  font-family: "Poppins", sans-serif !important;
  background: transparent !important;
  border: none !important;
}

#sidebar ul#sidebarnav-modern li a:hover,
#sidebar ul#sidebarnav-modern li.gp-open>a,
#sidebar ul#sidebarnav-modern li.gp-open-nested>a.gp-nested-toggle {
  color: var(--nav-hover-text) !important;
  background: var(--nav-hover-bg) !important;
}

/* ACTIVE STATE FOR MAIN CATEGORIES - VIBRANT GRADIENT */
#sidebar ul#sidebarnav-modern>li.active>a,
#sidebar ul#sidebarnav-modern>li.gp-active>a {
  color: var(--nav-hover-text) !important;
  background-image: var(--nav-active-bg) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

/* DEEP ICON STYLE */
#sidebar ul#sidebarnav-modern li a i {
  margin-right: 15px !important;
  width: 20px !important;
  text-align: center !important;
  font-size: 1.1rem !important;
  transition: transform 0.3s ease !important;
}

#sidebar ul#sidebarnav-modern li a:hover i {
  transform: scale(1.1) !important;
}

/* TOGGLE CHEVRON */
.gp-submenu-toggle-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 0.8rem !important;
  color: var(--nav-text-muted) !important;
}

li.gp-open>a .gp-submenu-toggle-icon {
  transform: rotate(90deg) !important;
  color: var(--nav-hover-text) !important;
}

/* SUBMENU STRUCTURE (INDENTED) */
.gp-submenu {
  list-style: none !important;
  padding-left: 0 !important;
  display: none;
  overflow: hidden !important;
  position: relative !important;
  margin-left: 35px !important;
}

.gp-submenu::before {
  content: "" !important;
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  left: 10px !important;
  width: 2px !important;
  background-color: var(--nav-border) !important;
  border-radius: 2px !important;
}

li.gp-open>.gp-submenu {
  display: block;
  padding: 5px 0 !important;
}

/* SUBMENU LINKS */
.gp-submenu a,
.gp-sidenav-submenu a {
  padding: 6px 20px 6px 32px !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
  background: transparent !important;
  position: relative !important;
  color: var(--nav-text-muted) !important;
  display: block !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  text-align: left !important;
  border-radius: 10px !important;
  margin-right: 15px !important;
}

.gp-submenu a:hover {
  background: var(--nav-hover-bg) !important;
  color: var(--nav-hover-text) !important;
}

/* SUBMENU DOT INDICATOR - Oculto por defecto, visible solo en activo/hover */
.gp-submenu a::before {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  transition: all 0.25s ease !important;
  background-color: transparent !important;
  display: block !important;
  opacity: 0 !important;
  /* Invisible hasta que sea activo */
}

/* ACTIVE STATE FOR SUBMENU CHILDREN */
.gp-submenu li.active a::before,
.gp-submenu li.gp-active a::before,
.gp-submenu a:hover::before {
  background-color: var(--nav-accent) !important;
  border-color: var(--nav-accent) !important;
  box-shadow: 0 0 10px var(--nav-accent-vibrant) !important;
  opacity: 1 !important;
}

.gp-submenu li.active a,
.gp-submenu li.gp-active a {
  color: var(--nav-accent) !important;
  font-weight: 700 !important;
  background: var(--nav-hover-bg) !important;
}

/* HIDE ORIGINAL ICONS IN SUBMENU EXCEPT FOR NESTED TOGGLES */
.gp-submenu a i {
  display: none !important;
}

.gp-submenu .gp-has-submenu-nested>a i {
  display: inline-block !important;
}

/* NESTED SUBMENU STYLES */
.gp-has-submenu-nested>a {
  padding: 10px 15px 10px 15px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: var(--nav-text) !important;
  font-weight: 600 !important;
  margin: 4px 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
}

/* El header del dropdown abierto recibe el mismo estilo visual que el padre */
#sidebarnav-modern .gp-has-submenu-nested.gp-open-nested>a.gp-nested-toggle,
#sidebarnav-modern .gp-has-submenu-nested.gp-active>a.gp-nested-toggle {
  background: var(--nav-hover-bg) !important;
  background-image: var(--nav-active-bg) !important;
  color: var(--nav-hover-text) !important;
  font-weight: 700 !important;
}

.gp-has-submenu-nested:hover>a.gp-nested-toggle {
  background: var(--nav-hover-bg) !important;
  color: var(--nav-accent) !important;
}


.gp-has-submenu-nested>a::before {
  display: none !important;
  /* No dot for nested headers */
}


.gp-submenu-nested {
  list-style: none !important;
  padding-left: 0 !important;
  display: none;
  overflow: hidden !important;
  position: relative !important;
  margin-left: 20px !important;
  /* Indent the whole nested block */
}

.gp-submenu-nested::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 10px !important;
  /* Second vertical line */
  width: 2px !important;
  background-color: var(--nav-border) !important;
  opacity: 0.5 !important;
}


li.gp-open-nested>a .gp-nested-toggle-icon {
  transform: rotate(90deg) !important;
  color: var(--nav-hover-text) !important;
}

li.gp-open-nested>.gp-submenu-nested {
  display: block;
  padding: 8px 0 !important;
}

#sidebarnav-modern .gp-submenu .gp-submenu-nested li a {
  padding-left: 35px !important;
  /* Space for the line and dot */
  font-size: 0.88rem !important;
  margin-right: 10px !important;
}

#sidebarnav-modern .gp-submenu .gp-submenu-nested li.active a,
#sidebarnav-modern .gp-submenu .gp-submenu-nested li.gp-active a {
  background: var(--nav-hover-bg) !important;
  color: var(--nav-accent) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  margin-right: 15px !important;
}

#sidebarnav-modern .gp-submenu .gp-submenu-nested li a::before {
  left: 7px !important;
  width: 8px !important;
  height: 8px !important;
  opacity: 0 !important;
  /* Oculto por defecto para items anidados */
  background-color: transparent !important;
}

/* Solo muestra el dot cuando el item nested está activo */
#sidebarnav-modern .gp-submenu .gp-submenu-nested li.active a::before,
#sidebarnav-modern .gp-submenu .gp-submenu-nested li.gp-active a::before {
  opacity: 1 !important;
  background-color: var(--nav-accent) !important;
  border-color: var(--nav-accent) !important;
  box-shadow: 0 0 10px var(--nav-accent-vibrant) !important;
}

.gp-nested-toggle-icon {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 0.7rem !important;
  opacity: 0.5;
}

li.gp-open-nested>a .gp-nested-toggle-icon {
  transform: rotate(90deg) !important;
  opacity: 1;
}

/* Page Content Transitions */
@keyframes gpFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gp-fade-in {
  animation: gpFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/*----------------------------------
    PAGE WRAPPER ADJUSTMENTS
----------------------------------*/
.page-wrapper {
  margin-left: 0 !important;
  /* Default 0 for mobile */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: transparent !important;
  padding-top: 64px !important;
  /* Height of topnav */
}

/* Desktop Sidebar Offset */
@media (min-width: 993px) {
  body.loggedin:not(.mini-sidebar) .page-wrapper {
    margin-left: 300px !important;
  }

  body.loggedin.mini-sidebar .page-wrapper {
    margin-left: 0px !important;
    /* OR 65px if we want icons visible offset */
  }
}

/* Fix mobile */
@media (max-width: 992px) {
  #sidebar {
    margin-left: -300px !important;
    z-index: 2000 !important;
    /* Higher z-index for mobile */
    background: var(--nav-bg) !important;
    /* Solid dark or gradient based on theme */
    position: fixed !important;
    top: -5px !important;
    height: 100vh !important;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* When sidebar is toggled open on mobile */
  #sidebar.collapsed,
  body.mini-sidebar #sidebar {
    margin-left: 0 !important;
  }

  /* Content shift and overlay on mobile */
  body.mini-sidebar .page-wrapper,
  #sidebar.collapsed~.page-wrapper {
    transform: translateX(300px) !important;
    margin-left: 0 !important;
    /* Use transform for smoother shift */
    opacity: 0.4 !important;
    pointer-events: none !important;
  }

  /* Reset when closed */
  body:not(.mini-sidebar) .page-wrapper {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Custom professional scrollbar */
#sidebar .scroll-sidebar::-webkit-scrollbar {
  width: 4px;
}

#sidebar .scroll-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

#sidebar .scroll-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--nav-accent) !important;
}

[x-cloak]  {
   display:  none  !important;
   
}