/* Field with search (Components/Shared/LookupField.razor, wms-blazor "Campo com busca", 2026-10-07): text field with suggestions while typing and a
   magnifier button attached to its right that opens a dialog with a filter and the full result list. */
.lookup-field {
    position: relative;
    min-width: 0
}

.lookup-input {
    display: flex;
    min-width: 0
}

.lookup-input .profile-name-input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.lookup-trigger {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--field-height);
    height: var(--field-height);
    margin-left: -1px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0 var(--field-radius) var(--field-radius) 0;
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer
}

.lookup-trigger:hover:not(:disabled) {
    background: var(--hover);
    color: var(--blue)
}

.lookup-trigger:disabled {
    opacity: .55;
    cursor: default
}

.lookup-suggestions {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    margin: 4px 0 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 8px 22px var(--shadow)
}

.lookup-suggestions li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    cursor: pointer
}

.lookup-suggestions li.is-active,
.lookup-suggestions li:hover {
    background: var(--hover);
    color: var(--text)
}

.lookup-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere
}

.lookup-title small,
.lookup-results .compact-title small {
    display: block;
    color: var(--text-muted)
}

.lookup-overlay {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 16px 16px;
    background: var(--scrim-light)
}

.lookup-dialog {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(620px, 100%);
    max-height: 78vh;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 18px 48px var(--shadow)
}

.lookup-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.lookup-dialog h3 {
    margin: 0;
    font-size: 15px;
    color: var(--text)
}

.lookup-close {
    display: inline-flex;
    padding: 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-muted);
    cursor: pointer
}

.lookup-close:hover {
    background: var(--hover);
    color: var(--text)
}

.lookup-filter {
    display: flex;
    gap: 8px
}

.lookup-filter .profile-name-input {
    flex: 1 1 auto;
    min-width: 0
}

.lookup-status {
    min-height: 16px;
    font-size: 12px;
    color: var(--text-muted)
}

.lookup-results {
    min-height: 0;
    overflow-y: auto
}

.lookup-results .compact-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere
}

/* Inside a search row with its own "Buscar" button (Pedidos and Solicitações: .picking-search; Recebimentos and Inventários:
   .inventory-product-search), the field takes the free width. */
.picking-search > .lookup-field,
.inventory-product-search > .lookup-field {
    flex: 1 1 auto
}

.inventory-product-search > .lookup-field {
    min-width: 0
}

/* Focus (2026-10-07): the ring of .workspace input:focus-visible (dashboard.css, outline 3px with offset) wrapped only the text field and left the
   magnifier outside it; the field and its button are one control, so the ring goes around the pair. */
.workspace .lookup-input input:focus-visible,
.workspace .lookup-input .lookup-trigger:focus-visible {
    outline: none
}

.workspace .lookup-input:has(:focus-visible) {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--field-radius)
}

/* Apartment picker (AddressLookupField, 2026-10-08): the dialog shows the address tree of Endereçamento (classes of addresses.css), wider than the
   product list; the tree scrolls inside the dialog. */
.lookup-dialog.address-lookup-dialog {
    width: min(760px, 100%)
}

.address-lookup-dialog .address-tree-panel {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0
}

.address-lookup-dialog .tree-label small:not(.tree-type) {
    flex: 0 1 auto;
    min-width: 0
}

/* Customer picker (CustomerLookupField/CustomerLookupDialog, wms-customers "Busca de clientes", 2026-10-19). */
.lookup-dialog.customer-lookup-dialog {
    width: min(760px, 100%)
}

.customer-lookup-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 12px;
    align-items: end;
    margin-top: 4px
}


.customer-lookup-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: center
}

.customer-lookup-dialog .lookup-results small {
    display: block
}

/* Branch picker (BranchLookupField/BranchLookupDialog, wms-branches "Busca de filiais", 2026-10-19): same layout as the customer picker; the label keeps
   the global margin-bottom (wms-ui). */
.lookup-dialog.branch-lookup-dialog {
    width: min(760px, 100%)
}

.branch-lookup-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 12px;
    align-items: end;
    margin-top: 4px
}

.branch-lookup-actions {
    display: flex;
    grid-column: 1 / -1;
    gap: 8px;
    align-items: center
}

.branch-lookup-dialog .lookup-results small {
    display: block
}

/* Supplier picker (SupplierLookupField/SupplierLookupDialog, wms-suppliers "Busca de fornecedores", 2026-10-19): same layout as the customer and branch pickers. */
.lookup-dialog.supplier-lookup-dialog {
    width: min(620px, 100%)
}

.supplier-lookup-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 12px;
    align-items: end;
    margin-top: 4px
}

.supplier-lookup-actions {
    display: flex;
    grid-column: 1 / -1;
    gap: 8px;
    align-items: center
}

/* Product dialog (ProductLookupDialog, LookupField ProductDialog; wms-products "Busca de produtos", 2026-10-19): code, description (wide) and barcode filters. */
.lookup-dialog.product-lookup-dialog {
    width: min(760px, 100%)
}

.product-lookup-filters {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(220px, 2fr) minmax(160px, 1fr);
    gap: 8px 12px;
    align-items: end;
    margin-top: 4px
}

.product-lookup-actions {
    display: flex;
    grid-column: 1 / -1;
    gap: 8px;
    align-items: center
}

@media (max-width: 640px) {
    .product-lookup-filters {
        grid-template-columns: 1fr
    }
}

/* Lot picker (BatchLookupField/BatchLookupDialog, wms-batches "Busca de lotes", 2026-10-19): same layout as the other pickers; inside a grid cell (Class grid-lookup)
   the field and the magnifier follow the 28px of the grid fields (forms.css). */
.lookup-dialog.batch-lookup-dialog {
    width: min(620px, 100%)
}

.batch-lookup-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 12px;
    align-items: end;
    margin-top: 4px
}

.batch-lookup-actions {
    display: flex;
    grid-column: 1 / -1;
    gap: 8px;
    align-items: center
}

.stock-grid .grid-lookup .lookup-trigger {
    width: 28px;
    height: 28px
}

.stock-grid .grid-lookup {
    margin: 0
}

/* Pickers of the filters of the report of the items of the boxes (BoxItemsLookupField/BoxItemsLookupDialog, wms-reports D275): same layout as the branch picker; the label keeps the global
   margin-bottom (wms-ui). */
.lookup-dialog.boxitems-lookup-dialog {
    width: min(720px, 100%)
}

.boxitems-lookup-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 12px;
    align-items: end;
    margin-top: 4px
}

.boxitems-lookup-actions {
    display: flex;
    grid-column: 1 / -1;
    gap: 8px;
    align-items: center
}

.boxitems-lookup-dialog .lookup-results small {
    display: block
}

/* The label of a box (CX-000123-5) is longer than the code balloon: shown whole, like .compact-code.is-label, in the dialog and in the suggestions of the box picker. */
.boxitems-lookup-dialog .compact-code,
.boxitems-lookup-field .lookup-suggestions .compact-code {
    width: auto;
    min-width: calc(9ch + 12px);
    padding: 3px 8px;
    overflow: visible;
    text-overflow: clip
}

/* Alert popup (MessagePopup, 2026-10-25: every alert of the system is a popup, wms-ui "Alertas em popup"): above the lookup dialogs, centered,
   narrow, a colored band by the tone, the message, an optional list of reasons and the OK button. */
.lookup-overlay.message-popup-overlay {
    z-index: 200;
    align-items: center;
    padding: 16px
}

.lookup-dialog.message-popup {
    width: min(440px, 100%);
    border-top: 4px solid var(--danger-text)
}

.lookup-dialog.message-popup.is-success { border-top-color: var(--success-text) }
.lookup-dialog.message-popup.is-info { border-top-color: var(--primary-text) }

.message-popup h3 {
    display: flex;
    align-items: center;
    gap: 6px
}

.message-popup.is-error h3 { color: var(--danger-text) }

.message-popup > p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    overflow-wrap: anywhere
}

.message-popup-reasons {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-2)
}

.message-popup-actions {
    display: flex;
    justify-content: flex-end
}