/*----------------------------------
    SIDEBAR — Gestión Plus (ERP)
----------------------------------*/
/* Estilos del menú moderno. El SCSS legacy (sidebar.scss) no se usa en runtime. */

#sidebar {
  min-width: 300px !important;
  max-width: 300px !important;
  width: 300px !important;
  /* Base azul del tema; superficie uniforme sin saltos de gradiente en el scroll */
  background: var(--nav-bg) !important;
  background-attachment: fixed !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: 1px solid color-mix(in srgb, var(--nav-border, #1e3a5f) 70%, transparent) !important;
  overflow-x: hidden !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: 14px 20px 6px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  color: color-mix(in srgb, var(--nav-text-muted, #94a3b8) 85%, #ffffff) !important;
  margin-top: 0.65rem !important;
  margin-bottom: 0.15rem !important;
  background: transparent !important;
  font-family: "Poppins", sans-serif !important;
  pointer-events: none !important;
  user-select: none !important;
  list-style: none !important;
}

/* Encabezados de área funcional (solo separadores visuales) */
#sidebar ul#sidebarnav-modern > li.gp-section-heading {
  padding: 16px 20px 4px !important;
  margin-top: 0.85rem !important;
  font-size: 0.65rem !important;
  letter-spacing: 1.6px !important;
  color: color-mix(in srgb, var(--nav-accent, #60a5fa) 55%, var(--nav-text-muted, #94a3b8)) !important;
  border-top: 1px solid color-mix(in srgb, var(--nav-border, #1e3a5f) 55%, transparent) !important;
  border-radius: 0 !important;
}

#sidebar ul#sidebarnav-modern > li.gp-section-heading:first-of-type,
#sidebar ul#sidebarnav-modern > li.gp-favorites-module + li.gp-section-heading {
  border-top: none !important;
  margin-top: 0.4rem !important;
}

#sidebar ul#sidebarnav-modern li a {
  padding: 9px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  color: var(--nav-text) !important;
  font-weight: 600 !important;
  margin: 2px 12px !important;
  border-radius: 10px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  min-height: 38px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  position: relative !important;
  font-family: "Poppins", sans-serif !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

#sidebar ul#sidebarnav-modern li a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--nav-accent, #60a5fa) 75%, transparent) !important;
  outline-offset: 1px !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;
}

/* Category toggle buttons have no href (avoid # redirect to base URL) —
   restore pointer cursor */
#sidebar ul#sidebarnav-modern li.gp-has-submenu > a.gp-category-toggle {
  cursor: pointer;
}

/* ACTIVE STATE FOR MAIN CATEGORIES - VIBRANT GRADIENT */
/* Módulo expandido: superficie azul ligeramente más clara */
#sidebar ul#sidebarnav-modern > li.gp-has-submenu.gp-open > a,
#sidebar ul#sidebarnav-modern > li.gp-has-submenu.gp-open.gp-active > a {
  background: color-mix(in srgb, #ffffff 8%, transparent) !important;
  background-image: none !important;
  box-shadow: inset 3px 0 0 0 var(--nav-accent, #3b82f6) !important;
}

#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;
}

/* Labels largos (Recursos de Inventario, Otros Movimientos) */
#sidebar ul#sidebarnav-modern > li.gp-has-submenu > a > .gp-link-content {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#sidebar ul#sidebarnav-modern > li.gp-has-submenu > a > .gp-link-content > i {
  flex: 0 0 18px !important;
  width: 18px !important;
  margin-right: 0 !important;
}

/*
 * Chevrons: permanecen en el DOM (Blade); ocultos sin reservar ancho.
 * Scope: solo #sidebarnav-modern — no afecta flechas fuera del sidebar.
 */
#sidebar ul#sidebarnav-modern .gp-submenu-toggle-icon,
#sidebar ul#sidebarnav-modern .gp-nested-toggle-icon {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  pointer-events: none !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;
}

/* 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 16px 6px 28px !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;
}

/*
 * Leaf items: fixed icon column + left-aligned wrapping text.
 * Icon aligns to first text line (flex-start); long labels wrap — no ellipsis.
 */
#sidebar ul#sidebarnav-modern .gp-submenu .gp-sidenav-submenu > a {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.35 !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 */
  /* ponytail: indicator ≠ leaf icon; do not reuse ::before for icons */
}

/* 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-hover-text, #fff) !important;
  font-weight: 700 !important;
  background: color-mix(in srgb, var(--nav-accent, #3b82f6) 28%, transparent) !important;
  box-shadow: inset 3px 0 0 0 var(--nav-accent, #3b82f6) !important;
}

/*
 * Leaf icons: fixed 16px column. Override global
 * #sidebar ul#sidebarnav-modern li a i { width:20px; margin-right:15px }.
 */
#sidebar ul#sidebarnav-modern .gp-submenu .gp-sidenav-submenu > a > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-top: 2px !important; /* align glyph with first text line */
  text-align: center !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  color: var(--nav-text-muted) !important;
  transform: none !important;
  opacity: 0.72;
}

#sidebar ul#sidebarnav-modern .gp-submenu .gp-sidenav-submenu > a:hover > i,
#sidebar ul#sidebarnav-modern .gp-submenu .gp-sidenav-submenu.active > a > i,
#sidebar ul#sidebarnav-modern .gp-submenu .gp-sidenav-submenu.gp-active > a > i,
#sidebar ul#sidebarnav-modern .gp-submenu li.active.gp-sidenav-submenu > a > i,
#sidebar ul#sidebarnav-modern .gp-submenu li.gp-active.gp-sidenav-submenu > a > i {
  color: inherit !important;
  opacity: 1;
  transform: none !important;
}

/* Nested group headers: icon in the label (excluye chevron oculto) */
.gp-submenu .gp-has-submenu-nested > a i:not(.gp-nested-toggle-icon) {
  display: inline-block !important;
}

.gp-submenu .gp-has-submenu-nested > a > span > i {
  width: 16px !important;
  min-width: 16px !important;
  margin-right: 8px !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  color: var(--nav-text-muted) !important;
  transform: none !important;
  opacity: 0.72;
}

/* NESTED SUBMENU STYLES */
.gp-has-submenu-nested>a {
  padding: 10px 15px 10px 15px !important;
  display: flex !important;
  justify-content: flex-start !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>.gp-submenu-nested {
  display: block;
  padding: 8px 0 !important;
}

#sidebarnav-modern .gp-submenu .gp-submenu-nested li a {
  padding-left: 28px !important;
  /* Space for the line and dot; icon sits after via flex gap */
  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;
}

/* 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;
}

/* ========== Menu Favoritos (módulo desplegable) ========== */
#sidebar ul#sidebarnav-modern > li.gp-favorites-module > a .gp-favorites-icon {
  color: #fbbf24 !important;
  opacity: 1 !important;
}

#sidebar ul#sidebarnav-modern > li.gp-favorites-module.gp-open > a {
  background: color-mix(in srgb, #ffffff 8%, transparent) !important;
  background-image: none !important;
  box-shadow: inset 3px 0 0 0 var(--nav-accent, #3b82f6) !important;
}

#sidebar ul#sidebarnav-modern .gp-favorites-list {
  margin: 0 !important;
  padding: 0 0 4px !important;
}

#sidebar ul#sidebarnav-modern .gp-favorites-list > li.gp-sidenav-submenu {
  position: relative;
}

#sidebar ul#sidebarnav-modern .gp-favorites-list > li.gp-sidenav-submenu > a {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0;
  padding: 8px 32px 8px 14px !important;
  color: var(--nav-text-muted) !important;
  border-radius: 10px !important;
}

#sidebar ul#sidebarnav-modern .gp-favorites-list > li.gp-sidenav-submenu > a:hover {
  background: var(--nav-hover-bg) !important;
  color: var(--nav-hover-text) !important;
}

#sidebar ul#sidebarnav-modern .gp-favorites-list > li.gp-sidenav-submenu.gp-active > a,
#sidebar ul#sidebarnav-modern .gp-favorites-list > li.gp-sidenav-submenu.active > a {
  color: var(--nav-hover-text, #fff) !important;
  font-weight: 700 !important;
  background: color-mix(in srgb, var(--nav-accent, #3b82f6) 28%, transparent) !important;
  box-shadow: inset 3px 0 0 0 var(--nav-accent, #3b82f6) !important;
}

/* Estrella absoluta: no cambia display del <li> (buscador hide/show) */
#sidebar ul#sidebarnav-modern .gp-submenu .gp-sidenav-submenu.gp-fav-row,
#sidebar ul#sidebarnav-modern .gp-submenu-nested .gp-sidenav-submenu.gp-fav-row,
#sidebar ul#sidebarnav-modern .gp-favorites-list > li.gp-sidenav-submenu.gp-fav-row {
  position: relative;
}

#sidebar ul#sidebarnav-modern .gp-submenu .gp-sidenav-submenu.gp-fav-row > a,
#sidebar ul#sidebarnav-modern .gp-submenu-nested .gp-sidenav-submenu.gp-fav-row > a {
  padding-right: 32px !important;
}

.gp-fav-star {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  z-index: 2;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}

.gp-fav-star i {
  font-size: 11px;
  pointer-events: none;
}

.gp-fav-star:hover {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  transform: translateY(-50%);
}

.gp-fav-star.is-active {
  color: #fbbf24;
}

.gp-fav-star:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.55);
  outline-offset: 1px;
}

.gp-fav-star.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

body.mini-sidebar #sidebar:not(:hover) .gp-fav-star,
#sidebar.collapsed:not(:hover) .gp-fav-star,
body.mini-sidebar #sidebar:not(:hover) .gp-favorites-wrap,
#sidebar.collapsed:not(:hover) .gp-favorites-wrap {
  display: none !important;
}