/* =========================================================
   Autocomplete — Complete CSS (aligned batch/mrp/exp + salt)
   Improved: vars, accessibility, reduced-motion, small fixes
   ========================================================= */

 :root {
     --autocomplete-max-height: 320px;
     --accent: #007bff;
     --accent-dark: #0056b3;
     --bg: #ffffff;
     --muted: #6c757d;
     --border: #dee2e6;
     --shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
     --hover-bg: #f7f9fb;
     --focus-gradient-start: #dbeeff;
     --focus-gradient-end: #eaf6ff;
     --stock-badge-bg: #28a745;
     --text: #212529;
 }

 /* Box sizing baseline */
 .ui-autocomplete,
 .ui-autocomplete * {
     box-sizing: border-box;
 }

 /* Container */
 .ui-autocomplete {
     position: absolute;
     /* usually needed for autocomplete dropdowns */
     max-height: var(--autocomplete-max-height);
     overflow-y: auto;
     overflow-x: hidden;
     border: 1px solid var(--border);
     border-radius: .25rem;
     background-color: var(--bg);
     box-shadow: var(--shadow);
     z-index: 9999 !important;
     padding: 0;
     margin: 0;
 }

 /* Scrollbar style (webkit) */
 .ui-autocomplete::-webkit-scrollbar {
     width: 6px;
     height: 6px;
 }

 .ui-autocomplete::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 3px;
 }

 .ui-autocomplete::-webkit-scrollbar-thumb:hover {
     background: #999;
 }

 /* Items list reset */
 .ui-menu {
     padding: 0;
     margin: 0;
     list-style: none;
 }

 /* Base item */
 .ui-menu .ui-menu-item {
     padding: 0;
     margin: 0;
 }

 .ui-menu .autocomplete-item {
     display: block;
     padding: .5rem .75rem;
     border-bottom: 1px solid #f1f3f5;
     background: var(--bg);
     transition: background .12s ease, box-shadow .12s ease;
     white-space: normal;
     /* keep a single transform-free baseline for layout stability */
 }

 .ui-menu .autocomplete-item:last-child {
     border-bottom: 0;
 }

 /* First row layout */
 .autocomplete-first-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: .75rem;
 }

 /* Name */
 .autocomplete-name {
     font-weight: 600;
     color: var(--text);
     flex: 1 1 auto;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 /* Details row (batch/exp/mrp) aligned */
 .autocomplete-details.item-details-grid {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     flex-wrap: nowrap;
     font-size: 0.85rem;
     color: var(--muted);
 }

 /* Column widths & alignment */
 .item-details-grid>div {
     min-width: 80px;
     /* consistent column width */
     text-align: right;
     margin-left: 0.75rem;
     white-space: nowrap;
 }

 .item-details-grid .col-batch {
     min-width: 110px;
     text-align: right;
 }

 .item-details-grid .col-exp {
     min-width: 90px;
     text-align: right;
 }

 .item-details-grid .col-mrp {
     min-width: 80px;
     text-align: right;
 }

 .item-details-grid .col-sp {
     min-width: 80px;
     text-align: right;
 }





 /* Hover — no heavy scale to avoid layout reflow; keep subtle shadow & border-left */
 .ui-menu .autocomplete-item:hover {
     background: var(--hover-bg);
     border-left: 3px solid var(--accent);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
     cursor: pointer;
 }

 /* Keyboard focus (clearer and accessible) */
 .ui-menu .ui-state-active>.autocomplete-item,
 .ui-state-active.autocomplete-item {
     background: linear-gradient(90deg, var(--focus-gradient-start) 0%, var(--focus-gradient-end) 100%);
     border-left: 5px solid var(--accent-dark);
     box-shadow: 0 6px 18px rgba(0, 86, 179, 0.18);
 }

 /* Badge visual treatments for hover & focus */
 .ui-menu .autocomplete-item:hover .badge-stock {
     transform: scale(1.04);
     transition: transform .14s;
 }

 .ui-menu .ui-state-active>.autocomplete-item .badge-stock {
     transform: scale(1.08);
     background-color: var(--stock-badge-bg) !important;
     color: #fff;
 }

 /* Focus outline for keyboard users (explicit) */
 .ui-menu .autocomplete-item:focus,
 .ui-menu .autocomplete-item[aria-selected="true"] {
     outline: 3px solid rgba(0, 123, 255, 0.12);
     outline-offset: 2px;
 }

 /* Reduced motion preferences */
 @media (prefers-reduced-motion: reduce) {

     .ui-menu .autocomplete-item,
     .ui-menu .autocomplete-item .badge-stock {
         transition: none !important;
         transform: none !important;
     }
 }

 /* Responsive tweaks */
 @media (max-width: 480px) {
     .ui-autocomplete {
         max-height: 260px;
     }

     .ui-menu .autocomplete-item {
         padding: .45rem .6rem;
     }

     .item-details-grid>div {
         min-width: auto;
         margin-left: .5rem;
         text-align: left;
     }

     .autocomplete-details {
         font-size: 0.8rem;
     }

     .salt-line {
         font-size: 0.75rem;
     }
 }

 /* Optional: improve contrast of small muted text on very small screens */
 @media (max-width: 360px) {

     .salt-line,
     .autocomplete-details {
         color: #5c636a;
     }
 }

 /* === Smooth highlight animation for keyboard / mouse navigation ===
   - Subtle translateX + background fade + shadow
   - Respects prefers-reduced-motion
   - Targets both <li.ui-menu-item> and inner .autocomplete-item
*/
 .ui-menu .ui-menu-item,
 .ui-menu .autocomplete-item {
     /* transition for background, transform and shadow */
     transition: background 180ms cubic-bezier(.2, .9, .2, 1),
         transform 180ms cubic-bezier(.2, .9, .2, 1),
         box-shadow 180ms cubic-bezier(.2, .9, .2, 1);
     will-change: transform, background, box-shadow;
 }

 /* Default (not-active) state: slightly neutral */
 .ui-menu .ui-menu-item>.autocomplete-item {
     transform: translateX(0);
 }

 /* Active — when keyboard navigates (jQuery UI applies .ui-state-active to LI) */
 .ui-menu .ui-state-active,
 .ui-menu .ui-state-active>.autocomplete-item,
 .ui-menu .ui-state-active>.autocomplete-item * {
     background: var(--hover-bg) !important;
     color: var(--text) !important;
     border-left: 5px solid #0056b3;
     box-shadow: 0 10px 24px rgba(0, 86, 179, 0.12);
     transform: translateX(6px);
     /* subtle slide to the right */
 }

 /* Keep badge consistent when active */
 .ui-menu .ui-state-active .badge-stock,
 .ui-menu .ui-state-active>.autocomplete-item .badge-stock {
     transform: scale(1.08);
     background-color: #28a745 !important;
     color: #fff;
 }

 /* Also animate hover (mouse) to match keyboard */
 .ui-menu .ui-menu-item:hover,
 .ui-menu .ui-menu-item:hover>.autocomplete-item {
     background: #f7f9fb;
     border-left: 3px solid #007bff;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
     transform: translateX(3px);
 }

 /* Reduced motion: remove transforms & transitions per user preference */
 @media (prefers-reduced-motion: reduce) {

     .ui-menu .ui-menu-item,
     .ui-menu .autocomplete-item {
         transition: none !important;
         transform: none !important;
         will-change: auto;
     }

     .ui-menu .ui-state-active,
     .ui-menu .ui-state-active>.autocomplete-item {
         transform: none !important;
     }
 }