/* ========================================
   TOOLBAR MODERNO SOFTLAND ERP v8
   Estilos para DevExpress Blazor Toolbar
   Basado en estructura real del DOM
   ======================================== */

/* Contenedor principal del toolbar */
.erp-toolbar-modern.dxbl-btn-toolbar {
    background: white !important;
    border: none !important;
    padding: 24px 24px 16px 24px !important;
    min-height: 70px !important;
    margin-top: 8px !important;
    overflow: visible !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
}

    /* Asegurar que el toolbar principal NUNCA se oculte */
    .erp-toolbar-modern.dxbl-btn-toolbar,
    .erp-toolbar-modern.dxbl-btn-toolbar[style*="display"],
    .erp-toolbar-modern.dxbl-btn-toolbar[style*="visibility"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

/* Grupo principal de botones - Contenedor blanco redondeado */
.erp-toolbar-modern .dxbl-btn-group.dxbl-toolbar-group.dxbl-toolbar-layout-block-group {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 6px 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100% !important; /* Usar todo el ancho disponible */
    width: auto !important;
}

/* Asegurar que TODOS los grupos del toolbar principal sean visibles */
.erp-toolbar-modern .dxbl-btn-group.dxbl-toolbar-group,
.erp-toolbar-modern .dxbl-toolbar-group {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: wrap !important;
}

/* Forzar visibilidad de todos los items del toolbar principal */
/* IMPORTANTE: Los botones deben ser visibles, no ocultos en el menú adaptativo prematuramente */
.erp-toolbar-modern .dxbl-toolbar-item:not([style*="display: none"]),
.erp-toolbar-modern .dxbl-toolbar-layout-block-item:not([style*="display: none"]) {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-flex !important; /* Forzar display inline-flex */
}

/* FORZAR que los items del toolbar sean visibles */
/* Prevenir que DevExpress oculte items prematuramente */
.erp-toolbar-modern .dxbl-toolbar-item,
.erp-toolbar-modern .dxbl-toolbar-layout-block-item {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Items que DevExpress marca como "hidden" - FORZAR visibilidad */
.erp-toolbar-modern .dxbl-toolbar-hidden-item {
    display: inline-flex !important; /* FORZAR DISPLAY */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Items adaptativos - mantener visibles */
.erp-toolbar-modern .dxbl-toolbar-adaptive-item,
.erp-toolbar-modern .dxbl-adaptive-item {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* PERMITIR que DevExpress oculte items con display: none */
/* Solo asegurar que el contenedor del toolbar no desaparezca */
.erp-toolbar-modern .dxbl-btn-group.dxbl-adaptive-group {
    display: inline-flex !important; /* El grupo siempre visible */
    visibility: visible !important;
}

/* Items individuales del toolbar */
.erp-toolbar-modern .dxbl-toolbar-item {
    margin: 0 !important;
}

/* ITEM contenedor con borde - Basado en la estructura real del DOM */
.erp-toolbar-modern .dxbl-toolbar-layout-block-item {
    background: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease !important;
}

    .erp-toolbar-modern .dxbl-toolbar-layout-block-item:hover {
        background: #f9fafb !important;
        border-color: #9ca3af !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

/* Separadores cada 3 botones */
.erp-toolbar-modern .dxbl-toolbar-item:nth-child(4)::before,
.erp-toolbar-modern .dxbl-toolbar-item:nth-child(7)::before,
.erp-toolbar-modern .dxbl-toolbar-item:nth-child(10)::before {
    content: '' !important;
    display: inline-block !important;
    width: 1px !important;
    height: 24px !important;
    background: #e5e7eb !important;
    margin: 0 8px !important;
    vertical-align: middle !important;
}

/* Botones internos - sin bordes para evitar doble borde */
.erp-toolbar-modern button.dxbl-btn,
.erp-toolbar-modern .dxbl-toolbar-layout-block-item button,
.erp-toolbar-modern button.dxbs-toolbar-btn,
.erp-toolbar-modern .dxbl-toolbar-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    transition: background 0.15s ease !important;
}

/* Compactar item template del toolbar moderno sin tocar otros componentes */
.erp-toolbar-modern .dxbl-toolbar-item-tmpl,
.erp-toolbar-modern .dxbl-toolbar-item,
.erp-toolbar-modern .dxbl-toolbar-layout-block-item,
.erp-toolbar-modern .dxbl-toolbar-btn,
.erp-toolbar-modern button.dxbl-btn,
.erp-toolbar-modern .dxbl-toolbar-layout-block-item button,
.erp-toolbar-modern button.dxbs-toolbar-btn {
    padding: 2px 6px !important;
    min-height: 30px !important;
    font-size: 15px !important;
}

/* Iconos */
    .erp-toolbar-modern button img,
    .erp-toolbar-modern .dxbl-toolbar-item img {
        width: 16px !important;
        height: 16px !important;
        margin-right: 2px !important;
    }

/* Texto de botones */
    .erp-toolbar-modern button span,
    .erp-toolbar-modern .dxbl-toolbar-item span {
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #374151 !important;
        max-width: 10ch !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

/* ========================================
   COLORES ESPECIFICOS POR TIPO DE BOTON
   Estilo Microsoft 365
   ======================================== */

/* Botón NUEVO - Azul Microsoft */
.erp-toolbar-modern .dxbl-toolbar-item[title="Nuevo"] span,
.erp-toolbar-modern .dxbl-toolbar-adaptive-item-text[title="Nuevo"] {
    color: #0078D4 !important;
}

.erp-toolbar-modern .dxbl-toolbar-item[title="Nuevo"] img {
    filter: brightness(0) saturate(100%) invert(38%) sepia(95%) saturate(2066%) hue-rotate(194deg) brightness(95%) contrast(101%) !important;
}

/* Botón REFRESCAR - Azul Microsoft */
.erp-toolbar-modern .dxbl-toolbar-item[title="Refrescar"] span,
.erp-toolbar-modern .dxbl-toolbar-item[title="Actualizar"] span,
.erp-toolbar-modern .dxbl-toolbar-adaptive-item-text[title="Refrescar"],
.erp-toolbar-modern .dxbl-toolbar-adaptive-item-text[title="Actualizar"] {
    color: #0078D4 !important;
}

.erp-toolbar-modern .dxbl-toolbar-item[title="Refrescar"] img,
.erp-toolbar-modern .dxbl-toolbar-item[title="Actualizar"] img {
    filter: brightness(0) saturate(100%) invert(38%) sepia(95%) saturate(2066%) hue-rotate(194deg) brightness(95%) contrast(101%) !important;
}

/* Botón ELIMINAR - Rojo */
.erp-toolbar-modern .dxbl-toolbar-item[title="Eliminar"] span,
.erp-toolbar-modern .dxbl-toolbar-adaptive-item-text[title="Eliminar"] {
    color: #D13438 !important;
}

.erp-toolbar-modern .dxbl-toolbar-item[title="Eliminar"] img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(2428%) hue-rotate(347deg) brightness(89%) contrast(88%) !important;
}

/* Botón EXCEL - Verde */
.erp-toolbar-modern .dxbl-toolbar-item[title="Excel"] span,
.erp-toolbar-modern .dxbl-toolbar-adaptive-item-text[title="Excel"] {
    color: #217346 !important;
}

.erp-toolbar-modern .dxbl-toolbar-item[title="Excel"] img {
    filter: brightness(0) saturate(100%) invert(33%) sepia(93%) saturate(1171%) hue-rotate(120deg) brightness(91%) contrast(91%) !important;
}

/* Hover states para botones con color */
.erp-toolbar-modern .dxbl-toolbar-layout-block-item:has(.dxbl-toolbar-item[title="Nuevo"]):hover,
.erp-toolbar-modern .dxbl-toolbar-layout-block-item:has(.dxbl-toolbar-item[title="Refrescar"]):hover,
.erp-toolbar-modern .dxbl-toolbar-layout-block-item:has(.dxbl-toolbar-item[title="Actualizar"]):hover {
    border-color: #0078D4 !important;
    background: #f0f8ff !important;
}

.erp-toolbar-modern .dxbl-toolbar-layout-block-item:has(.dxbl-toolbar-item[title="Eliminar"]):hover {
    border-color: #D13438 !important;
    background: #fff5f5 !important;
}

.erp-toolbar-modern .dxbl-toolbar-layout-block-item:has(.dxbl-toolbar-item[title="Excel"]):hover {
    border-color: #217346 !important;
    background: #f0fdf4 !important;
}


/* Botones deshabilitados */
.erp-toolbar-modern .dxbl-toolbar-layout-block-item.dxbl-disabled,
.erp-toolbar-modern button:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

    .erp-toolbar-modern .dxbl-toolbar-layout-block-item.dxbl-disabled:hover {
        background: white !important;
        border-color: #d1d5db !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }

/* ESPACIO ADICIONAL DESPUÉS DEL HEADER */
.erp-page-header {
    padding-bottom: 1px !important;
    margin-bottom: 1px !important;
}

/* ========================================
   DROPDOWN "MORE ITEMS" - TOOLBAR
   Estilos para menú overflow del toolbar
   VERSIÓN MEJORADA - Compatible todas las pantallas
   ======================================== */

/* IMPORTANTE:
   Este bloque es solo para dropdowns del toolbar moderno.
   No dejar .dxbl-dropdown-body ni div[class*="dxbl-dropdown"] en global,
   porque esos selectores rompen dropdowns de editores DevExpress como
   calendarios, date pickers y popups internos del ERP. */
/* Contenedor del dropdown - solo estilo visual.
   No tocar position/top/right/transform aqui porque DevExpress
   calcula el anclaje del popup dinamicamente. */
.erp-toolbar-modern-popup {
    z-index: 9999 !important;
}

.erp-toolbar-modern-popup .dxbl-dropdown-content,
.erp-toolbar-modern-popup .dxbl-dropdown-body,
.erp-toolbar-modern-popup .dxbl-popup-body {
    min-width: 320px !important;
    max-width: 420px !important;
    width: auto !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 8px !important;
    box-sizing: border-box !important;
}

/* Ajuste para el popup adaptativo de DevExpress */
.erp-toolbar-modern-popup.dxbl-adaptive-popup,
.erp-toolbar-modern-popup.dxbl-popup-wrapper[data-adaptive="true"] {
    z-index: 9999 !important;
}

    /* Lista de items del dropdown */
    .erp-toolbar-modern-popup .dxbl-itemlist-dropdown,
    .erp-toolbar-modern-popup .dxbl-dropdown-body .dxbl-itemlist-dropdown,
    .erp-toolbar-modern-popup .dxbl-itemlist-dropdown {
        padding: 0 !important;
        margin: 0 !important;
    }

        /* Items del menú dropdown - MAYOR �REA DE CLICK */
        .erp-toolbar-modern-popup .dxbl-dropdown-item,
        .erp-toolbar-modern-popup .dxbl-itemlist-dropdown .dxbl-dropdown-item,
        .erp-toolbar-modern-popup .dxbl-popup-cell .dxbl-dropdown-item,
        .erp-toolbar-modern-popup div[class*="dxbl-dropdown"] .dxbl-dropdown-item {
            display: flex !important;
            align-items: center !important;
            padding: 12px 16px !important;
            margin: 2px 0 !important;
            border-radius: 6px !important;
            transition: all 0.15s ease !important;
            gap: 12px !important;
            min-height: 44px !important;
            cursor: pointer !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }

            /* Hover de items - M�S VISIBLE */
            .erp-toolbar-modern-popup .dxbl-dropdown-item:hover,
            .erp-toolbar-modern-popup .dxbl-itemlist-dropdown .dxbl-dropdown-item:hover {
                background: #f3f4f6 !important;
            }

            /* Iconos dentro del dropdown - TAMAÑO CONSISTENTE */
            .erp-toolbar-modern-popup .dxbl-dropdown-item img,
            .erp-toolbar-modern-popup .dxbl-popup-cell img,
            .erp-toolbar-modern-popup img {
                width: 20px !important;
                height: 20px !important;
                min-width: 20px !important;
                margin: 0 !important;
                margin-right: 12px !important;
                flex-shrink: 0 !important;
                display: inline-block !important;
                vertical-align: middle !important;
                order: 0 !important;
            }

            /* Texto de los items - CON TRUNCADO AUTOM�TICO */
            /* IMPORTANTE:
               Esta regla debe quedar limitada al dropdown del toolbar.
               No volver a usar .dxbl-dropdown-item span, .dxbl-popup-cell span o
               .dxbl-adaptive-popup span aqui, porque esos selectores hacen que
               botones de popups/modales del ERP hereden el gris #374151. */
            .erp-toolbar-modern-popup .dxbl-dropdown-item span {
                font-size: 14px !important;
                font-weight: 400 !important;
                color: #374151 !important;
                line-height: 1.5 !important;
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                max-width: 320px !important;
                display: inline-block !important;
                vertical-align: middle !important;
            }

            /* Tooltip para textos largos */
            .erp-toolbar-modern-popup .dxbl-dropdown-item[title] span,
            .erp-toolbar-modern-popup .dxbl-dropdown-item[title] {
                cursor: help !important;
            }

/* Celdas del popup (DevExpress usa tablas) */
    .erp-toolbar-modern-popup .dxbl-popup-cell,
    .erp-toolbar-modern-popup .dxbl-popup-table .dxbl-popup-cell,
    .erp-toolbar-modern-popup .dxbl-popup-cell {
        padding: 0 !important;
        width: 100% !important;
    }

    /* Tabla del popup */
    .erp-toolbar-modern-popup .dxbl-popup-table,
    .erp-toolbar-modern-popup table {
        border-spacing: 0 !important;
        border-collapse: collapse !important;
    }


    /* Separadores entre items */
    .erp-toolbar-modern-popup .dxbl-dropdown-divider,
    .erp-toolbar-modern-popup hr {
        height: 1px !important;
        background: #e5e7eb !important;
        margin: 6px 0 !important;
        border: none !important;
    }

    /* Items deshabilitados */
    .erp-toolbar-modern-popup .dxbl-dropdown-item.dxbl-disabled,
    .erp-toolbar-modern-popup .dxbl-dropdown-item[disabled] {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

/* CORRECCIÓN PARA BOTÓN "MORE ITEMS" (⋮) */
.erp-toolbar-modern .dxbl-toolbar-adaptive-btn,
.erp-toolbar-modern button[data-adaptive="true"],
.dxbl-btn-toolbar[data-adaptive="true"] {
    position: relative !important;
    background: transparent !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    transition: all 0.15s ease !important;
}

    .erp-toolbar-modern .dxbl-toolbar-adaptive-btn:hover,
    .erp-toolbar-modern button[data-adaptive="true"]:hover {
        background: #f3f4f6 !important;
        border-color: #d1d5db !important;
    }

/* ========================================
   ESTILOS PARA PAGINADOR EN TOOLBAR
   ======================================== */

/* Item del toolbar que contiene el paginador */
.erp-toolbar-modern .dxbl-toolbar-item:has(.my-pager),
div[class*="dxbl-toolbar"] .dxbl-toolbar-item:has(.my-pager) {
    overflow: visible !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
}

/* Asegurar que el paginador dentro del toolbar no se corte */
.erp-toolbar-modern .my-pager,
div[class*="dxbl-toolbar"] .my-pager {
    overflow: visible !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important;
}

/* ========================================
   PLACEHOLDER DEL TOOLBAR - REDUCIR TAMAÑO
   ======================================== */

/* Reducir el espacio del placeholder cuando no hay contenido */
.dxbl-toolbar-placeholder,
div[class*="dxbl-toolbar-placeholder"] {
    min-width: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    display: none !important;
}

/* Placeholder específico dentro del grupo de toolbar */
.dxbl-toolbar-group .dxbl-toolbar-placeholder,
.dxbl-btn-group .dxbl-toolbar-placeholder {
    min-width: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 auto !important;
}

/* EXCEPCIÓN: NO reducir el item del toolbar que contiene el paginador */
/* Solo afectar al toolbar secundario (el que NO tiene la clase erp-toolbar-modern) */
.dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.my-pager),
.dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.dxbl-pager),
.dxbl-toolbar:not([class*="erp-toolbar-modern"]) .dxbl-toolbar-item:has(.my-pager),
.dxbl-toolbar:not([class*="erp-toolbar-modern"]) .dxbl-toolbar-item:has(.dxbl-pager) {
    min-width: auto !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex: 0 0 auto !important;
    margin-left: 57dvw; /* Default para pantallas grandes */
}

/* Responsive: Pantallas medianas (aproximadamente monitor promedio completo) */
@media (max-width: 1780px) {
    .dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.my-pager),
    .dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.dxbl-pager) {
        margin-left: 50dvw;
    }
}

/* Responsive: Pantallas medianas (aproximadamente monitor promedio completo) */
@media (max-width: 1560px) {
    .dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.my-pager),
    .dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.dxbl-pager) {
        margin-left: 45dvw;
    }
}


/* Responsive: Pantallas medianas (aproximadamente monitor promedio completo) */
@media (max-width: 1280px) {
    .dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.my-pager),
    .dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.dxbl-pager) {
        margin-left: 40dvw;
    }
}

/* Responsive: Pantallas pequeñas (mitad de monitor promedio ~960px) */
@media (max-width: 960px) {
    .dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.my-pager),
    .dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.dxbl-pager) {
        margin-left: 30dvw;
    }
}

/* Responsive: Tablets y móviles */
@media (max-width: 768px) {
    .dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.my-pager),
    .dxbl-toolbar:not(.erp-toolbar-modern) .dxbl-toolbar-item:has(.dxbl-pager) {
        /*margin-left: 15dvw;*/
    }
}

/* ========================================
   PAGINADOR DENTRO DEL DROPDOWN "M�S ACCIONES"
   Resetear margin cuando está colapsado
   ======================================== */

/* Cuando el paginador está dentro del dropdown adaptativo */
.dxbl-dropdown .dxbl-toolbar-item:has(.my-pager),
.dxbl-dropdown .dxbl-toolbar-item:has(.dxbl-pager),
.dxbl-adaptive-popup .dxbl-toolbar-item:has(.my-pager),
.dxbl-adaptive-popup .dxbl-toolbar-item:has(.dxbl-pager),
[data-dxtoolbar-ellipsis-dropdown-id] .dxbl-toolbar-item:has(.my-pager),
[data-dxtoolbar-ellipsis-dropdown-id] .dxbl-toolbar-item:has(.dxbl-pager) {
    margin-left: 0 !important; /* Sin margin en dropdown */
    margin-right: 0 !important;
    width: 100% !important; /* Full width en dropdown */
    max-width: 100% !important;
}

/* Paginador dentro del dropdown - ajustar tamaño */
.dxbl-dropdown .my-pager,
.dxbl-dropdown .dxbl-pager,
.dxbl-adaptive-popup .my-pager,
.dxbl-adaptive-popup .dxbl-pager {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important; /* Centrar botones en dropdown */
}

/* Truncado visual conservador para captions largos del toolbar principal.
   Solo recorta el texto visible del boton y no toca grupos, hidden/adaptive
   items ni el menu overflow de DevExpress. Si no convence, revertir solo
   este bloque. */
.erp-toolbar-modern .dxbl-toolbar-item span {
    display: inline-block !important;
    max-width: 10ch !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}
/* Ajuste conservador para el dropdown del menu ... del toolbar.
   Solo corrige el ancho interno del panel overflow sin tocar logica,
   Razor ni adaptividad de DevExpress. Si no convence, revertir solo
   este bloque. */
/* PRUEBA CONTROLADA:
   estos overrides globales pueden interferir con dropdowns de toolbars
   internos del visor de reportes. Se limitan temporalmente al toolbar
   moderno para validar si el popup del viewer recupera su posicion.
   Si no mejora, revertir solo este bloque. */
.erp-toolbar-modern-popup.dxbl-toolbar-dropdown.dxbl-dropdown-dialog {
    width: 340px !important;
    max-width: 340px !important;
}

.erp-toolbar-modern-popup.dxbl-toolbar-dropdown.dxbl-dropdown-dialog .dxbl-dropdown-body {
    padding: 8px !important;
    box-sizing: border-box !important;
}

.dxbl-popup-cell:has(> .erp-toolbar-modern-popup.dxbl-toolbar-dropdown.dxbl-dropdown-dialog) {
    left: -80px !important;
}

@media (min-width: 768px) {
    .erp-f1-dialog .dxbl-modal-body {
        min-width: 680px !important;
    }

    .erp-f1-dialog .dxbl-btn-toolbar {
        width: 100% !important;
        min-width: 0 !important;
    }

    .erp-f1-dialog .dxbl-toolbar-item:has(.modern-search-wrapper),
    .erp-f1-dialog .modern-search-item {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 320px !important;
    }

    .erp-f1-dialog .modern-search-wrapper,
    .erp-f1-dialog .modern-search-input-plain {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 320px !important;
    }

    .erp-f1-dialog .dxbl-toolbar-item:has(.my-pager),
    .erp-f1-dialog .dxbl-toolbar-item:has(.dxbl-pager),
    .erp-f1-dialog .dxbl-toolbar-item.dxbl-adaptive-item.dxbl-toolbar-item-last {
        flex: 0 0 auto !important;
        margin-left: 12px !important;
        min-width: fit-content !important;
        width: fit-content !important;
        padding-right: 0 !important;
    }

    .erp-f1-dialog .my-pager,
    .erp-f1-dialog .dxbl-pager {
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        width: fit-content !important;
        max-width: 100% !important;
    }

    .erp-grid-dialog .dxbl-modal-body {
        min-width: 680px !important;
    }

    .erp-grid-dialog .dxbl-btn-toolbar {
        width: 100% !important;
        min-width: 0 !important;
    }

    .erp-grid-dialog .dxbl-toolbar-item:has(.modern-search-wrapper),
    .erp-grid-dialog .modern-search-item {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 320px !important;
    }

    .erp-grid-dialog .modern-search-wrapper,
    .erp-grid-dialog .modern-search-input-plain {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 320px !important;
    }

    .erp-grid-dialog .dxbl-toolbar-item:has(.my-pager),
    .erp-grid-dialog .dxbl-toolbar-item:has(.dxbl-pager),
    .erp-grid-dialog .dxbl-toolbar-item.dxbl-adaptive-item.dxbl-toolbar-item-last {
        flex: 0 0 auto !important;
        margin-left: 12px !important;
        min-width: fit-content !important;
        width: fit-content !important;
        padding-right: 0 !important;
    }

    .erp-grid-dialog .my-pager,
    .erp-grid-dialog .dxbl-pager {
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        width: fit-content !important;
        max-width: 100% !important;
    }
}