html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* ========================================================================
   Utilidad min-w-0 (no incluida en el tema de DevExpress).
   Necesaria para que `text-truncate` funcione dentro de contenedores
   flex: por defecto los flex-items tienen min-width: auto, lo que les
   impide encogerse por debajo del ancho de su contenido y rompe el
   ellipsis. Aplicar min-width: 0 en el item flexible permite el
   recorte con "..." correctamente.
   ======================================================================== */

.min-w-0 {
    min-width: 0 !important;
}

/* ========================================================================
   Reglas globales del SidebarMenu para el estado colapsado.
   Se mantienen aqui (fuera del scoped CSS) para que apliquen tambien a
   elementos renderizados por componentes hijos como MenuItemRecursive.
   ======================================================================== */

/* Etiquetas (titulos, chevrons del sidebar) ocultas cuando el sidebar esta colapsado */
.sidebar-menu.collapsed .sidebar-label {
    display: none !important;
}

/* ========================================================================
   Centrado del icono cuando el sidebar esta colapsado.

   El padding-left de 1.25rem (20px) lo aplicamos directamente como
   `style` inline en el razor sobre cada fila (menu-group-header,
   group-disabled, sidebar-favorites-header y NavLink de favoritos),
   porque el tema de DevExpress carga `.px-2 { ... !important }` despues
   de este archivo y compite por la cascada. Inline style con !important
   gana siempre.

   Aqui solo neutralizamos el margen/padding adicionales del wrapper
   interno de los items de favoritos, que ya no aporta padding propio.
   ======================================================================== */

.sidebar-menu .sidebar-favorite-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

.sidebar-menu .sidebar-favorites-items {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ========================================================================
   Conmutador buscador expandido / lupa colapsada.
   Se posicionan en absoluto sobre el mismo espacio para que el cambio de
   estado no provoque un reflow de layout (crear/destruir el DxSearchBox o
   recalcular la altura del contenedor). Solo se intercambian via opacity.
   ======================================================================== */

.sidebar-menu .search-box-fixed {
    position: relative;
    min-height: 38px;
}

.sidebar-menu .search-box-expanded,
.sidebar-menu .search-box-collapsed {
    transition: opacity 0.15s ease;
}

.sidebar-menu .search-box-collapsed {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.sidebar-menu.collapsed .search-box-collapsed {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-menu.collapsed .search-box-expanded {
    opacity: 0;
    pointer-events: none;
}

/* Cuando el sidebar esta colapsado, ocultar todo el subarbol de items
   recursivos (MenuItemRecursive). Quedan en el DOM para no pagar el coste
   de recreacion al expandir, pero no se renderizan visualmente. */
.sidebar-menu.collapsed .menu-group-items-wrapper {
    grid-template-rows: 0fr !important;
}

/* ========================================================================
   Mientras el sidebar esta cambiando de tamaño (clase .sidebar-toggling
   aplicada por el JS optimista durante ~320ms), suprimir transiciones
   anidadas que correrian en paralelo y se perciben como tirones.

   En particular, el wrapper de items recursivos (.menu-group-items-wrapper)
   tiene una transicion de grid-template-rows 0fr <-> 1fr para abrir/cerrar
   un grupo. Si un grupo estaba expandido al colapsar el sidebar, al
   reabrirlo esa animacion vertical correria simultaneamente con la
   animacion horizontal del sidebar empujando hacia abajo los iconos de los
   grupos posteriores ("desplazamiento vertical").

   Al desactivarla durante el toggle, los items aparecen/desaparecen
   instantaneamente al instante del clic y los iconos posteriores quedan
   en su posicion final desde el frame 0. La animacion solo se aprecia
   cuando el usuario expande/colapsa un grupo dentro del sidebar abierto
   (sin .sidebar-toggling), que es donde aporta valor.
   ======================================================================== */

.sidebar-menu.sidebar-toggling .menu-group-items-wrapper {
    transition: none !important;
}

/* ========================================================================
   El resizer entre Favoritos y la lista de grupos esta SIEMPRE en el DOM
   (cuando hay mas de un favorito) para evitar que aparezca/desaparezca de
   golpe al final del toggle. Su altura/padding/opacity se animan en
   sincronia con el ancho del sidebar para que el reposicionamiento de los
   iconos posteriores se perciba como una transicion suave.
   ======================================================================== */

.sidebar-menu .resizer {
    overflow: hidden;
    transition: height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
}

.sidebar-menu.collapsed .resizer {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* ========================================================================
   Wrapper de la lista de grupos: cuando el sidebar esta colapsado se
   anade un padding-top equivalente al .pt-2 (0.5rem = 8px) para compensar
   visualmente el espacio que aporta el resizer cuando esta visible.
   Animar la transicion evita el "salto" al final de la animacion del
   sidebar que se producia cuando Blazor cambiaba la clase pt-2 al
   re-renderizar (310ms despues del clic, justo cuando el ojo creia que
   la animacion ya habia terminado).
   ======================================================================== */

.sidebar-menu .sidebar-groups-wrapper {
    transition: padding-top 0.3s ease;
}

.sidebar-menu.collapsed .sidebar-groups-wrapper {
    padding-top: 0.5rem;
}