/* =========================================================
   CUSTOM ERP - SIDEBAR + TOPBAR CLEAN
========================================================= */

/* -------------------------------
   TOPBAR / LAYOUT BASE
-------------------------------- */

#page-topbar {
    left: 0 !important;
    right: 0 !important;
    z-index: 1002 !important;
}

.navbar-header {
    height: 70px !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.navbar-brand-box {
    width: 250px !important;
    min-width: 250px !important;
    height: 70px !important;
    background: #2a3042 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.logo,
.logo-sm,
.logo-lg {
    background: transparent !important;
}

.vertical-menu {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 250px !important;
    background: #2a3042 !important;
    z-index: 1001 !important;
    overflow: hidden !important;
}

.main-content {
    margin-left: 250px !important;
}

.footer {
    left: 250px !important;
}

/* -------------------------------
   SIDEBAR BASE - CORREGIDO
-------------------------------- */

.vertical-menu .h-100 {
    height: calc(100vh - 70px) !important;
}

/* Scroll real del sidebar */
.vertical-menu,
.vertical-menu .h-100,
.vertical-menu [data-simplebar],
.vertical-menu .simplebar-wrapper,
.vertical-menu .simplebar-mask,
.vertical-menu .simplebar-content-wrapper {
    min-height: 0 !important;
}

body:not(.vertical-collpsed) .vertical-menu .simplebar-content-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

#sidebar-menu {
    padding: 10px 0 30px !important;
}

#sidebar-menu ul,
#sidebar-menu li {
    list-style: none !important;
}

#sidebar-menu .menu-title {
    padding: 12px 24px 8px !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: #6a7187 !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
}

/* Padre expandido */
body:not(.vertical-collpsed) #sidebar-menu > ul > li > a {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 8px 24px !important;
    color: #a6b0cf !important;
    font-size: 14px !important;
    text-decoration: none !important;
    gap: 12px !important;
    position: relative !important;
    line-height: 1.22 !important;
}

body:not(.vertical-collpsed) #sidebar-menu > ul > li > a i {
    width: 20px !important;
    min-width: 20px !important;
    text-align: center !important;
    font-size: 18px !important;
    color: #7f89a8 !important;
    flex: 0 0 20px !important;
}

/* IMPORTANTE: no cortar nombres largos en menú expandido */
body:not(.vertical-collpsed) #sidebar-menu > ul > li > a span {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    color: inherit !important;
}

#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li.mm-active > a,
#sidebar-menu > ul > li > a.active {
    color: #ffffff !important;
}

#sidebar-menu > ul > li > a:hover i,
#sidebar-menu > ul > li.mm-active > a i,
#sidebar-menu > ul > li > a.active i {
    color: #5b73e8 !important;
}

/* Flecha */
body:not(.vertical-collpsed) #sidebar-menu > ul > li > a.has-arrow {
    padding-right: 36px !important;
}

body:not(.vertical-collpsed) #sidebar-menu > ul > li > a.has-arrow:after {
    right: 18px !important;
}

/* -------------------------------
   SUBMENÚ EXPANDIDO
-------------------------------- */

body:not(.vertical-collpsed) #sidebar-menu .sub-menu {
    position: static !important;
    display: none;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu.mm-show {
    display: block !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 18px 8px 48px !important;
    gap: 10px !important;
    color: #a6b0cf !important;
    font-size: 13px !important;
    text-decoration: none !important;
    line-height: 1.25 !important;
    background: transparent !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a i {
    width: 18px !important;
    min-width: 18px !important;
    text-align: center !important;
    font-size: 15px !important;
    color: #7f89a8 !important;
    flex: 0 0 18px !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a span {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    color: inherit !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a:hover,
body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li.mm-active > a,
body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a.active {
    color: #ffffff !important;
    background: rgba(91, 115, 232, 0.16) !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a:hover i,
body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li.mm-active > a i,
body:not(.vertical-collpsed) #sidebar-menu .sub-menu > li > a.active i {
    color: #5b73e8 !important;
}

#sidebar-menu .sub-menu > li > a::before {
    display: none !important;
}

/* -------------------------------
   MODO COLAPSADO - FIX FINAL
-------------------------------- */

body.vertical-collpsed .navbar-brand-box {
    width: 70px !important;
    min-width: 70px !important;
}

body.vertical-collpsed .vertical-menu {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    overflow: visible !important;
}

body.vertical-collpsed .main-content {
    margin-left: 70px !important;
}

body.vertical-collpsed .footer {
    left: 70px !important;
}

body.vertical-collpsed .vertical-menu .h-100,
body.vertical-collpsed .vertical-menu [data-simplebar],
body.vertical-collpsed .vertical-menu .simplebar-wrapper,
body.vertical-collpsed .vertical-menu .simplebar-mask,
body.vertical-collpsed .vertical-menu .simplebar-content-wrapper,
body.vertical-collpsed .vertical-menu .simplebar-content {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    overflow: visible !important;
}

body.vertical-collpsed #sidebar-menu {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    padding: 10px 0 30px !important;
}

body.vertical-collpsed #sidebar-menu .menu-title {
    display: none !important;
}

body.vertical-collpsed #sidebar-menu > ul,
body.vertical-collpsed #sidebar-menu > ul > li {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}

body.vertical-collpsed #sidebar-menu > ul > li {
    position: relative !important;
}

/* Ícono principal centrado */
body.vertical-collpsed #sidebar-menu > ul > li > a {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > a > i {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 44px !important;
    line-height: 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: static !important;

    font-size: 20px !important;
    text-align: center !important;
    color: #7f89a8 !important; /* color normal */
    transition: color .15s ease !important;
}

/* Hover en modo contraído */
body.vertical-collpsed #sidebar-menu > ul > li > a:hover > i {
    color: #5b73e8 !important;
}

/* Activo/seleccionado en modo contraído */
body.vertical-collpsed #sidebar-menu > ul > li.mm-active > a > i,
body.vertical-collpsed #sidebar-menu > ul > li > a.active > i,
body.vertical-collpsed #sidebar-menu > ul > li.mm-active > a:hover > i {
    color: #5b73e8 !important;
}
/* Título del módulo en modo colapsado - FIX ESTABLE
   Ya no dependemos del <span>, usamos attr(title) del <a> padre */
body.vertical-collpsed #sidebar-menu > ul > li > a > span {
    display: none !important;
}

/* Evita que la flecha del template se meta en el flyout */
body.vertical-collpsed #sidebar-menu > ul > li > a.has-arrow:after {
    display: none !important;
}

/* Cabecera del módulo padre en flyout colapsado */
body.vertical-collpsed #sidebar-menu > ul > li > a.has-arrow::before {
    content: attr(title) !important;
    display: none !important;
}

body.vertical-collpsed #sidebar-menu > ul > li:hover > a.has-arrow::before {
    display: flex !important;
    align-items: center !important;

    position: absolute !important;
    top: 0 !important;
    left: 70px !important;

    width: 360px !important;
    min-width: 360px !important;
    max-width: 420px !important;
    height: 44px !important;

    padding: 0 18px !important;
    margin: 0 !important;

    background: #2a3042 !important;
    color: #5b73e8 !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .55px !important;
    line-height: 1.2 !important;

    border-radius: 0 10px 0 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 8px 6px 24px rgba(0,0,0,0.22) !important;

    z-index: 100002 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    pointer-events: auto !important;
    box-sizing: border-box !important;
}

/* Flyout del submenú */
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    position: absolute !important;
    top: 44px !important;
    left: 70px !important;

    width: 360px !important;
    min-width: 360px !important;
    max-width: 420px !important;

    background: #2a3042 !important;
    border-radius: 0 0 10px 0 !important;
    box-shadow: 8px 12px 24px rgba(0,0,0,0.35) !important;
    z-index: 100001 !important;

    padding: 8px 0 !important;
    margin: 0 !important;

    max-height: calc(100vh - 134px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    transition: none !important;
    animation: none !important;
    box-sizing: border-box !important;
}

/* Mostrar flyout solo al pasar mouse */
body.vertical-collpsed #sidebar-menu > ul > li:hover > ul.sub-menu,
body.vertical-collpsed #sidebar-menu > ul > li:focus-within > ul.sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Zona segura para que no desaparezca el panel al mover el mouse */
body.vertical-collpsed #sidebar-menu > ul > li:hover > a.has-arrow,
body.vertical-collpsed #sidebar-menu > ul > li:focus-within > a.has-arrow {
    overflow: visible !important;
}

/* Aunque metisMenu marque mm-show/mm-active, en modo contraído no debe abrirse solo */
body.vertical-collpsed #sidebar-menu > ul > li.mm-active > ul.sub-menu,
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu.mm-show {
    display: block !important;
}

/* Refuerzo para que ningún overflow del padre corte la cabecera */
body.vertical-collpsed #sidebar-menu > ul > li,
body.vertical-collpsed #sidebar-menu > ul > li > a {
    overflow: visible !important;
}
/* Flyout del submenú */
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;

    position: absolute !important;
    top: 44px !important;
    left: 70px !important;

    width: 360px !important;
    min-width: 360px !important;
    max-width: 420px !important;

    background: #2a3042 !important;
    border-radius: 0 0 10px 0 !important;
    box-shadow: 8px 12px 24px rgba(0,0,0,0.35) !important;
    z-index: 99999 !important;

    padding: 8px 0 !important;
    margin: 0 !important;

    max-height: calc(100vh - 134px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    transition: none !important;
    animation: none !important;
}
body.vertical-collpsed #sidebar-menu > ul > li:hover > ul.sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Items del flyout usando todo el ancho */
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li {
    width: 100% !important;
    max-width: 100% !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    min-height: 38px !important;
    padding: 9px 18px !important;

    color: #a6b0cf !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a > i {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: auto !important;
    line-height: 1 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    color: #7f89a8 !important;
    text-align: center !important;
    flex: 0 0 18px !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a > span {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    overflow-wrap: anywhere !important;

    color: inherit !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a:hover,
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li.mm-active > a,
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a.active {
    color: #ffffff !important;
    background: rgba(91,115,232,0.16) !important;
}

body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a:hover i,
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li.mm-active > a i,
body.vertical-collpsed #sidebar-menu > ul > li > ul.sub-menu > li > a.active i {
    color: #5b73e8 !important;
}

/* -------------------------------
   VELOCIDAD SUBMENÚS
-------------------------------- */

#sidebar-menu .sub-menu,
#sidebar-menu .collapse,
#sidebar-menu .collapsing,
#sidebar-menu .mm-collapse,
#sidebar-menu .mm-collapsing {
    transition: none !important;
    animation: none !important;
}

#sidebar-menu .collapsing,
#sidebar-menu .mm-collapsing {
    height: auto !important;
    overflow: hidden !important;
    transition: none !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu.mm-show {
    display: block !important;
}

body:not(.vertical-collpsed) #sidebar-menu .sub-menu:not(.mm-show) {
    display: none !important;
}
/* -------------------------------
   MEGA MENU TOPBAR
-------------------------------- */

.dropdown-megamenu {
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(91,115,232,0.3) transparent;
}

.dropdown-megamenu::-webkit-scrollbar {
    width: 5px;
}

.dropdown-megamenu::-webkit-scrollbar-thumb {
    background: rgba(91,115,232,0.35);
    border-radius: 10px;
}

.dropdown-megamenu .row.mt-3 {
    border-top: 1px solid #e9eaed !important;
    padding-top: 16px !important;
    margin-top: 12px !important;
}

.dropdown-megamenu h5.font-size-14 {
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid #f0f1f5 !important;
    color: #343a40 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dropdown-megamenu .megamenu-list {
    padding-left: 0 !important;
}

.dropdown-megamenu .megamenu-list li {
    list-style: none !important;
    margin-bottom: 1px !important;
}

.dropdown-megamenu .megamenu-list li a {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 6px !important;
    font-size: 13px !important;
    color: #74788d !important;
    border-radius: 4px !important;
    transition: color .15s, background .15s !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}

.dropdown-megamenu .megamenu-list li a:hover {
    color: #5b73e8 !important;
    background: rgba(91,115,232,0.07) !important;
}

.dropdown-megamenu .megamenu-list li a i {
    font-size: 14px !important;
    min-width: 16px !important;
    color: #a6b0cf !important;
    flex-shrink: 0 !important;
}

.dropdown-megamenu .megamenu-list li a:hover i {
    color: #5b73e8 !important;
}

/* -------------------------------
   RESPONSIVE
-------------------------------- */

@media (max-width: 991px) {
    .navbar-brand-box {
        width: 70px !important;
        min-width: 70px !important;
    }

    .vertical-menu {
        top: 70px !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .footer {
        left: 0 !important;
    }
}

/* =========================================================
   FIX FINAL - ICONO PADRE ACTIVO EN MENÚ CONTRAÍDO
   Cuando estoy dentro de un módulo, el icono principal queda azul
========================================================= */

body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.active > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.has-arrow > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > a.active > i {
    color: #5b73e8 !important;
}

/* Refuerzo para Boxicons/íconos que pintan desde ::before */
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.active > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.has-arrow > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > a.active > i::before {
    color: #5b73e8 !important;
}

/* Mantener azul aunque pases el mouse por el módulo activo */
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active:hover > a > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li.mm-active:hover > a > i::before {
    color: #5b73e8 !important;
}

/* =========================================================
   FIX - ICONO DEL SUBMÓDULO ACTIVO EN FLYOUT CONTRAÍDO
   El texto puede quedar blanco, pero el icono debe quedar azul
========================================================= */

body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a.active > i {
    color: #5b73e8 !important;
}

/* Refuerzo para Boxicons / Bootstrap Icons / icon fonts */
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a.active > i::before {
    color: #5b73e8 !important;
}

/* Mantener el icono azul aunque el submódulo activo tenga fondo seleccionado */
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a:hover > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active:hover > i,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a:hover > i::before,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active:hover > i::before {
    color: #5b73e8 !important;
}

/* =========================================================
   FIX - ICONO DEL MÓDULO PADRE ACTIVO EN MENÚ EXPANDIDO
   Ejemplo: Contabilidad, Inventario, Ventas, etc.
========================================================= */

body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active > a > i,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.has-arrow > i,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > a.active > i {
    color: #5b73e8 !important;
}

/* Refuerzo para icon fonts / Boxicons */
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active > a > i::before,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active > a.has-arrow > i::before,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > a.active > i::before {
    color: #5b73e8 !important;
}

/* Mantener azul al pasar mouse por el módulo activo */
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active:hover > a > i,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li.mm-active:hover > a > i::before {
    color: #5b73e8 !important;
}

/* =========================================================
   SIDEBAR - BOTÓN NUEVO EN SUBMENÚ
   El texto del item mantiene su URL normal.
   El botón NUEVO redirige a la URL de creación.
========================================================= */

body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a > .sidebar-new-badge,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a > .sidebar-new-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 48px !important;
    max-width: none !important;
    height: 18px !important;

    margin-left: auto !important;
    padding: 0 7px !important;

    border-radius: 4px !important;
    background: #3b194d !important;
    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;

    overflow: visible !important;
    text-overflow: unset !important;

    cursor: pointer !important;
    user-select: none !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a > .sidebar-new-badge:hover,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a > .sidebar-new-badge:hover,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a > .sidebar-new-badge,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li.mm-active > a > .sidebar-new-badge,
body:not(.vertical-collpsed) .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active > .sidebar-new-badge,
body.vertical-collpsed .vertical-menu #sidebar-menu #side-menu > li > ul.sub-menu > li > a.active > .sidebar-new-badge {
    background: #5b73e8 !important;
    color: #ffffff !important;
}

#sidebar-menu .sub-menu > li > a .sidebar-new-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 46px !important;
    max-width: none !important;
    height: 18px !important;

    margin-left: auto !important;
    padding: 0 7px !important;

    border-radius: 4px !important;
    background: #3b194d !important;
    color: #ffffff !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    text-transform: none !important;
    letter-spacing: 0 !important;

    overflow: visible !important;
    text-overflow: unset !important;
}

#sidebar-menu .sub-menu > li > a:hover .sidebar-new-badge,
#sidebar-menu .sub-menu > li.mm-active > a .sidebar-new-badge,
#sidebar-menu .sub-menu > li > a.active .sidebar-new-badge {
    background: #5b73e8 !important;
    color: #ffffff !important;
}