/* Shared jQuery UI autocomplete look (products, serials, customers).
   Used with wwwroot/js/product-autocomplete.js  ->  window.PA.product / PA.serial / PA.customer */

.ui-autocomplete { padding: 8px !important; }

@media (max-width: 767px) {
    .ui-autocomplete { min-width: calc(100vw - 40px) !important; max-width: calc(100vw - 40px) !important; }
    .pa-side { min-width: 0; }
    .pa-row { gap: 10px; padding: 10px; }
}

.autocomplete-item.pa-item { list-style: none; margin: 0 0 6px 0 !important; padding: 0 !important; position: relative; border: none !important; background: transparent !important; box-shadow: none !important; transform: none !important; overflow: visible; }
.autocomplete-item.pa-item:last-child { margin-bottom: 0 !important; }
.pa-item .ui-menu-item-wrapper { display: block; border: 1px solid var(--card-border-color) !important; border-radius: 12px !important; background: var(--card-color) !important; padding: 0 !important; color: var(--text-primary-color); transition: background .15s, border-color .15s, box-shadow .15s; }
.pa-card { position: relative; }
.pa-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.pa-img { position: relative; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; overflow: hidden; }
.pa-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--card-color); }
.pa-main { flex: 1 1 auto; min-width: 0; }
.pa-name { font-weight: 600; font-size: 14px; line-height: 1.3; white-space: normal; word-break: break-word; }
.pa-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pa-chip { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--card-border-color); background: rgba(99, 102, 241, 0.08); line-height: 1.5; }
.pa-chip.code { font-family: monospace; letter-spacing: .2px; }
.pa-sub { margin-top: 4px; font-size: 11.5px; opacity: .7; }
.pa-side { flex: 0 0 auto; text-align: right; min-width: 96px; padding-right: 10px; }
.pa-price { font-weight: 700; font-size: 15px; line-height: 1.2; }
.pa-stock { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pa-stock.ok { background: rgba(25, 135, 84, 0.14); color: #198754; }
.pa-stock.none { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
.pa-stock.svc { background: rgba(108, 117, 125, 0.16); color: #6c757d; }
.pa-no { position: absolute; top: 6px; right: 10px; font-size: 10px; opacity: .3; font-weight: 700; pointer-events: none; }

/* active / hover: soft tint + accent ring, text stays readable (overrides the global white-on-primary rule) */
.pa-item .ui-menu-item-wrapper.ui-state-active,
.pa-item .ui-menu-item-wrapper:hover,
[data-bs-theme="dark"] .pa-item .ui-menu-item-wrapper.ui-state-active,
[data-bs-theme="dark"] .pa-item .ui-menu-item-wrapper:hover {
    background: rgba(var(--primary-rgb), 0.09) !important;
    border: 1px solid var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
    outline: none !important;
    color: var(--text-primary-color) !important;
}
.pa-item .ui-menu-item-wrapper.ui-state-active .pa-name,
.pa-item .ui-menu-item-wrapper:hover .pa-name,
.pa-item .ui-menu-item-wrapper.ui-state-active .pa-price,
.pa-item .ui-menu-item-wrapper:hover .pa-price,
.pa-item .ui-menu-item-wrapper.ui-state-active .pa-sub,
.pa-item .ui-menu-item-wrapper:hover .pa-sub { color: var(--text-primary-color) !important; }
.pa-item .ui-menu-item-wrapper.ui-state-active .pa-chip,
.pa-item .ui-menu-item-wrapper:hover .pa-chip { color: var(--text-primary-color) !important; background: rgba(var(--primary-rgb), 0.12) !important; border-color: rgba(var(--primary-rgb), 0.35) !important; }
.pa-item .ui-menu-item-wrapper.ui-state-active .pa-stock.ok, .pa-item .ui-menu-item-wrapper:hover .pa-stock.ok { color: #198754 !important; background: rgba(25, 135, 84, 0.16) !important; }
.pa-item .ui-menu-item-wrapper.ui-state-active .pa-stock.none, .pa-item .ui-menu-item-wrapper:hover .pa-stock.none { color: #dc3545 !important; background: rgba(220, 53, 69, 0.14) !important; }
.pa-item .ui-menu-item-wrapper.ui-state-active .pa-stock.svc, .pa-item .ui-menu-item-wrapper:hover .pa-stock.svc { color: #6c757d !important; background: rgba(108, 117, 125, 0.18) !important; }
.pa-cap { font-size: 10px; text-transform: uppercase; letter-spacing: .3px; opacity: .65; }