/*
 * Contrato unico para todos los buscadores del ERP.
 *
 * Fila 1: campo principal y, justo a su derecha, Buscar/Limpiar.
 * Fila 2: filtros secundarios, siempre desde la izquierda.
 * Las hojas de cada CRUD conservan colores y detalles visuales; esta hoja
 * comun es la unica responsable de la estructura del buscador.
 */
.app-shell .list-toolbar-panel > .list-toolbar,
.app-shell .list-toolbar-panel > .pedidos-search-toolbar {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-flow: row dense !important;
    align-items: center !important;
    gap: 12px 14px !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Campo de busqueda principal: aproximadamente media zona de trabajo. */
.app-shell .list-toolbar-panel > .list-toolbar > .list-toolbar-search,
.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-search-field,
.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .commercial-document-search-field {
    grid-column: 1 / span 6 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 760px !important;
    min-width: 0 !important;
    justify-self: start !important;
}

/* Buscar queda inmediatamente a la derecha del textbox. */
.app-shell .list-toolbar-panel > .list-toolbar > .list-toolbar-actions,
.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-search-actions {
    grid-column: 7 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Los filtros directos forman la segunda fila, de izquierda a derecha. */
.app-shell .list-toolbar-panel > .list-toolbar > .sap-field,
.app-shell .list-toolbar-panel > .list-toolbar > .list-toolbar-limit,
.app-shell .list-toolbar-panel > .list-toolbar > .list-toolbar-checks {
    grid-row: 2 !important;
    grid-column: auto / span 3 !important;
    align-self: center !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.app-shell .list-toolbar-panel > .list-toolbar > .list-toolbar-limit {
    grid-column: auto / span 2 !important;
}

.app-shell .list-toolbar-panel > .list-toolbar > .list-toolbar-checks {
    grid-column: auto / span 4 !important;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px 16px !important;
    justify-self: start !important;
}

/* Listados de pedidos que ya separan semanticamente busqueda y filtros. */
.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-search-row {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 760px) minmax(190px, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-search-row > .pedidos-search-field {
    width: 100% !important;
    max-width: 760px !important;
    min-width: 0 !important;
}

.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-search-row > .pedidos-search-actions {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-filter-row,
.app-shell .list-toolbar-panel > .list-toolbar > .operations-toolbar-row {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-filter-row > *,
.app-shell .list-toolbar-panel > .list-toolbar > .operations-toolbar-row > * {
    flex: 0 1 250px !important;
    width: min(100%, 250px) !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-filter-row > .pedidos-date-field,
.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-filter-row > .pedidos-limit-field,
.app-shell .list-toolbar-panel > .list-toolbar > .operations-toolbar-row > .operations-toolbar-date {
    flex-basis: 190px !important;
    width: min(100%, 190px) !important;
}

.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-filter-field,
.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-trash-field {
    grid-row: 2 !important;
    grid-column: auto / span 2 !important;
    align-self: center !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-commercial-field {
    grid-column: auto / span 3 !important;
}

.app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-trash-field {
    justify-self: start !important;
}

/* Mayor usa Cuenta como busqueda principal. */
.app-shell .mayor-list-page .list-toolbar-panel > .list-toolbar > .sap-field:first-child {
    grid-column: 1 / span 6 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 760px !important;
}

.app-shell .mayor-list-page .list-toolbar-panel > .list-toolbar > .sap-field:not(:first-child) {
    grid-row: 2 !important;
    grid-column: auto / span 2 !important;
}

/*
 * Los selectores emergentes forman parte del ERP, pero no de los CRUD de
 * tienda. Mantienen el mismo orden: texto primero, Buscar inmediatamente a
 * continuacion y el resto de acciones despues.
 */
.app-shell .erp-popup .master-selector-toolbar {
    display: grid !important;
    grid-template-columns: minmax(260px, 620px) minmax(0, 1fr) !important;
    align-items: end !important;
    justify-content: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.app-shell .erp-popup .master-selector-search {
    width: 100% !important;
    min-width: 0 !important;
}

.app-shell .erp-popup .master-selector-actions {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
}

.app-shell .erp-popup .product-picker-search-row {
    display: grid !important;
    grid-template-columns: minmax(260px, 620px) max-content max-content max-content !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.app-shell .erp-popup .product-picker-search-input {
    width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 1100px) and (min-width: 721px) {
    .app-shell .list-toolbar-panel > .list-toolbar > .list-toolbar-search,
    .app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-search-field,
    .app-shell .list-toolbar-panel > .pedidos-search-toolbar > .commercial-document-search-field,
    .app-shell .mayor-list-page .list-toolbar-panel > .list-toolbar > .sap-field:first-child {
        grid-column: 1 / span 8 !important;
    }

    .app-shell .list-toolbar-panel > .list-toolbar > .list-toolbar-actions,
    .app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-search-actions {
        grid-column: 9 / -1 !important;
    }

    .app-shell .list-toolbar-panel > .list-toolbar > .sap-field,
    .app-shell .list-toolbar-panel > .list-toolbar > .list-toolbar-limit,
    .app-shell .list-toolbar-panel > .list-toolbar > .list-toolbar-checks {
        grid-column: auto / span 4 !important;
    }
}

@media (max-width: 720px) {
    .app-shell .list-toolbar-panel > .list-toolbar,
    .app-shell .list-toolbar-panel > .pedidos-search-toolbar,
    .app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-search-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .app-shell .list-toolbar-panel > .list-toolbar > *,
    .app-shell .list-toolbar-panel > .pedidos-search-toolbar > *,
    .app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-search-row > *,
    .app-shell .mayor-list-page .list-toolbar-panel > .list-toolbar > * {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-filter-row,
    .app-shell .list-toolbar-panel > .list-toolbar > .operations-toolbar-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .app-shell .list-toolbar-panel > .pedidos-search-toolbar > .pedidos-filter-row > *,
    .app-shell .list-toolbar-panel > .list-toolbar > .operations-toolbar-row > * {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .app-shell .erp-popup .master-selector-toolbar,
    .app-shell .erp-popup .product-picker-search-row {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    .app-shell .erp-popup .master-selector-actions {
        width: 100% !important;
    }
}