/* Cuando un DxGrid (o DxTreeList) es el UNICO control dentro de un
   DxFormLayout de una pestaña y debe llenar la altura disponible del
   contenedor (en vez de crecer para caber todas las filas y forzar scroll
   de toda la pestaña). Aplica igual a DxTreeList porque su elemento raíz
   (dxbl-tree-list) trae también la clase "dxbl-grid" (ej. class="dxbl-grid
   dxbl-grid-nowrap"), confirmado inspeccionando el DOM en
   ProductInformationClassifications; no hace falta un selector aparte.

   Uso: agrega la clase "cq-grid-fill" al div contenedor que ya trae "cq-flow"
   y "h-100" (ej. <div class="h-100 cq-flow cq-grid-fill">). No modifica
   ".cq-flow" para no afectar otras pestañas que usan esa misma clase solo
   para el sistema de columnas responsivo (formularios normales con varios
   campos, como ProductInformationGeneral o ProductInformation).

   Cadena real de contenedores confirmada inspeccionando el DOM en Chrome
   (F12) entre <DxFormLayout> y <DxGrid>:

   .overflow-auto.h-100 (DxFormLayout)
    -> dxbl-form-layout-group.group-shadow
     -> dxbl-group-control.dxbl-group
        -> div.dxbl-group-header (caption, se deja tal cual)
        -> dxbl-expandable-container.dxbl-group-body   (contenedor expandible/colapsable)
         -> div.dxbl-group-body-content
          -> div.dxbl-row
           -> dxbl-form-layout-item.col-sm-12
            -> div.dxbl-fl-ctrl.dxbl-fl-ctrl-nc
             -> dxbl-grid.dxbl-grid

   Sin esto, cada nivel es un bloque estatico con altura "auto" (sized a su
   contenido), asi que el DxGrid crece para caber todas las filas (hasta
   10,000px, documentado por DevExpress) sin importar el contenedor.
   Se fuerza cada nivel a flex-column con altura resuelta para que el propio
   DxGrid controle su scroll (vertical y horizontal). No se usa
   position:absolute porque algun wrapper intermedio (dxbl-fl-ctrl-nc) usa
   overflow:hidden y colapsa a 0px si su unico hijo sale del flujo normal. */

.cq-grid-fill .overflow-auto.h-100,
.cq-grid-fill dxbl-form-layout-group.group-shadow,
.cq-grid-fill dxbl-group-control.dxbl-group,
.cq-grid-fill dxbl-expandable-container.dxbl-group-body,
.cq-grid-fill .dxbl-group-body-content,
.cq-grid-fill .dxbl-row,
.cq-grid-fill dxbl-form-layout-item.col-sm-12,
.cq-grid-fill .dxbl-fl-ctrl.dxbl-fl-ctrl-nc {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
}

.cq-grid-fill .dxbl-grid {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
}