/* Searchable combo box — used wherever there's a long item dropdown.
   Usage:
     <div class="combo">
       <input type="text" class="combo-search" autocomplete="off">
       <input type="hidden" name="item_id" class="combo-value">
       <div class="combo-list"></div>
     </div>
   Then call: ComboBox.init(scope, items)
   where items is [{id, partNo, desc, unit}] and scope is optional. */

.combo { position: relative; }
.combo-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 280px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.combo-list.open { display: block; }
.combo-list .opt {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.combo-list .opt:hover, .combo-list .opt.active { background: var(--accent-soft); }
.combo-list .opt .pn { font-family: var(--mono); font-weight: 500; }
.combo-list .opt .desc { color: var(--muted); font-size: 12px; }
.combo-list .empty { padding: 12px; color: var(--muted); text-align: center; font-size: 13px; }