/* inventory-picker.css — shared styling for the inventory reference
 * chip + searchable picker popover (PROTOCOL_INVENTORY).
 *
 * V3.645 — extracted verbatim from protocol-editor.css. The picker is
 * used by the protocols editor AND by the paper builder's 🔑 Values
 * page ([@item:KEY]); leaving these rules in protocol-editor.css meant
 * the builder loaded the picker's JS but none of its CSS, so the
 * popover opened invisible. Any page that loads protocol-inventory.js
 * must load this file too.
 */

/* Inline [!inv:<id>] chips in step / note / safety / figure-caption bodies */
.proto-inv {
  display: inline-block;
  background: #ecf6ed;
  border: 1px solid #b6d8b9;
  border-radius: 3px;
  padding: 0 6px;
  margin: 0 1px;
  font-size: 0.95em;
  font-family: inherit;
  font-weight: 500;
  color: #1f5d24;
  cursor: help;
  user-select: none;
}
.proto-inv-low {
  background: #fff5d6;
  border-color: #ead78b;
  color: #745d00;
}
.proto-inv-out {
  background: #fde0dc;
  border-color: #e8a89e;
  color: #8a1d11;
}
.proto-inv-unknown {
  background: #fff4e5;
  border-color: #f0c896;
  color: #8a4a00;
}

/* Picker popover — distinct class set from .ln-inv-popover so the two
 * lab-notebook + protocol pickers can coexist on a page-cache hit
 * without style bleed. */
.proto-inv-pop {
  position: fixed;
  z-index: 200;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  width: 360px;
  max-width: calc(100vw - 16px);
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}
.proto-inv-pop[hidden] { display: none; }
.proto-inv-pop-title {
  padding: 8px 12px;
  font-weight: 600;
  font-size: 13px;
  color: #333;
  border-bottom: 1px solid #eee;
}
.proto-inv-pop-search {
  margin: 8px 12px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
}
.proto-inv-pop-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.proto-inv-pop-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-bottom: 1px solid #f4f4f4;
  cursor: pointer;
  font-family: inherit;
}
.proto-inv-pop-row:hover, .proto-inv-pop-row.active {
  background: #eef4ff;
}
.proto-inv-pop-key {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.proto-inv-kind-badge {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: 700;
}
.proto-inv-kind-chemical { background: #fff5d6; color: #745d00; }
.proto-inv-kind-item     { background: #eef4ff; color: #1e3a6e; }
.proto-inv-pop-name {
  font-weight: 500;
  font-size: 13px;
  color: #222;
  flex: 1;
}
.proto-inv-pop-meta {
  font-size: 11px;
  color: #666;
}
.proto-inv-pop-empty {
  padding: 12px;
  font-style: italic;
  color: #888;
  font-size: 13px;
}
.proto-inv-pop-hint {
  border-top: 1px solid #eee;
  padding: 6px 12px;
  font-size: 11px;
  color: #888;
}
.proto-inv-pop-hint kbd {
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0 4px;
  font-size: 10px;
}