/* ============================================================
   grn-new-v2.css — redesigned New GRN form
   Layered ON TOP of grn.css. Adds:
     - .grnn-parents (PO + Invoice chip strip)
     - .grnn-header  (compact one-row receipt header)
     - .grnn-lines variance columns (OK / Short / Damaged / Excess)
     - .grnn-lines status pill, hover row tools, scan input
     - .grnn-picker-drawer (right-side slide-in for catalog search)
     - .grnn-disclosure (collapsed invoice-pending block)
     - .grnn-3way-mini (live 3-way match preview in sidebar)
   ========================================================== */


/* ============================================================
   PARENT DOCUMENTS STRIP
   ============================================================ */
.grnn-parents {
  margin: 18px 22px 0 22px;
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 0;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-lg);
  box-shadow: var(--sd-shadow-sm);
  overflow: hidden;
}
.grnn-parents__chip {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  position: relative;
}
.grnn-parents__chip + .grnn-parents__chip { border-left: 1px solid var(--sd-line-100); }
.grnn-parents__chip-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.grnn-parents__chip-icon svg { width: 18px; height: 18px; }
.grnn-parents__chip--ok .grnn-parents__chip-icon {
  background: var(--sd-green-100);
  color: var(--sd-green-600);
  border: 1px solid #c4dfcf;
}
.grnn-parents__chip--warn .grnn-parents__chip-icon {
  background: var(--sd-amber-100);
  color: var(--sd-amber-text);
  border: 1px solid #EBC07B;
}
.grnn-parents__chip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.grnn-parents__chip-caps {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sd-ink-500);
  font-weight: 600;
}
.grnn-parents__chip-id {
  font-family: var(--sd-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--sd-ink-900);
}
.grnn-parents__chip-id .arrow {
  font-family: var(--sd-font);
  font-size: 11px;
  font-weight: 500;
  color: var(--sd-ink-400);
  margin: 0 4px;
}
.grnn-parents__chip-meta {
  font-size: 11.5px;
  color: var(--sd-ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grnn-parents__chip-meta strong { color: var(--sd-ink-900); font-weight: 500; }
.grnn-parents__chip-edit {
  appearance: none;
  background: transparent;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-sm);
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sd-ink-700);
  cursor: pointer;
  white-space: nowrap;
}
.grnn-parents__chip-edit:hover { background: var(--sd-blue-050); border-color: var(--sd-blue-600); color: var(--sd-blue-700); }
.grnn-parents__connector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-ink-300);
  background: var(--sd-bg-soft);
  border-left: 1px solid var(--sd-line-100);
  border-right: 1px solid var(--sd-line-100);
}
.grnn-parents__connector svg { width: 14px; height: 14px; }

/* warn variant of invoice chip */
.grnn-parents__chip--warn { background: linear-gradient(180deg, #FFFBEF 0%, #fff 80%); }


/* ============================================================
   COMPACT RECEIPT HEADER (one-row grid)
   ============================================================ */
.grnn-header {
  margin-top: 14px;
}
.grnn-header .grnn-grid {
  grid-template-columns: 130px 1fr 1fr 1fr 1fr 1fr;
  gap: 12px;
}


/* ============================================================
   LINES TABLE — Variance columns + per-line status
   ============================================================ */

/* Header bar above the table */
.grnn-lines-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sd-line-100);
  background: var(--sd-bg-softer);
}
.grnn-lines-bar__title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sd-ink-900);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.grnn-lines-bar__count {
  font-family: var(--sd-mono);
  font-size: 11px;
  color: var(--sd-ink-500);
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 500;
}
.grnn-lines-bar__breakdown {
  font-size: 11.5px;
  color: var(--sd-ink-500);
}
.grnn-lines-bar__breakdown .ok { color: var(--sd-green-600); font-weight: 500; }
.grnn-lines-bar__breakdown .short { color: var(--sd-amber-text); font-weight: 500; }
.grnn-lines-bar__breakdown .dmg { color: var(--sd-red-600); font-weight: 500; }
.grnn-lines-bar__spacer { flex: 1; }
.grnn-lines-bar__action {
  appearance: none;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-sm);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--sd-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.grnn-lines-bar__action:hover { background: var(--sd-blue-050); border-color: var(--sd-blue-600); color: var(--sd-blue-700); }
.grnn-lines-bar__action svg { width: 12px; height: 12px; }
.grnn-lines-bar__action--primary {
  background: var(--sd-green-100);
  border-color: #c4dfcf;
  color: #1F6A3F;
}
.grnn-lines-bar__action--primary:hover { background: #c4e6cf; border-color: #8fcaa1; color: #154A2C; }
.grnn-lines-bar__action--ghost {
  border-style: dashed;
  color: var(--sd-ink-700);
}

/* Variance qty inputs */
.grnn-var-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}
.grnn-var-input {
  width: 44px;
  height: 26px;
  border: 1px solid var(--sd-line-200);
  border-radius: var(--sd-radius-xs);
  text-align: center;
  font-family: var(--sd-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--sd-ink-900);
  font-variant-numeric: tabular-nums;
  background: #fff;
}
.grnn-var-input:focus {
  outline: none;
  border-color: var(--sd-teal-600);
  box-shadow: 0 0 0 2px rgba(23,162,184,.18);
}
.grnn-var-input--zero { color: var(--sd-ink-300); font-weight: 500; }
.grnn-var-input--short { background: #FEF6E7; color: var(--sd-amber-text); border-color: #EBC07B; }
.grnn-var-input--dmg   { background: var(--sd-red-100); color: var(--sd-red-600); border-color: #E1A6B3; }
.grnn-var-input--exc   { background: var(--sd-blue-050); color: var(--sd-blue-700); border-color: #B7CEDF; }

/* Per-line status pill — auto-derived */
.grnn-line-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.grnn-line-status svg { width: 10px; height: 10px; flex-shrink: 0; }
.grnn-line-status--ok    { background: var(--sd-green-100); color: #1F6A3F; border-color: #c4dfcf; }
.grnn-line-status--short { background: var(--sd-amber-100); color: var(--sd-amber-text); border-color: #EBC07B; }
.grnn-line-status--dmg   { background: var(--sd-red-100);   color: #A8273F; border-color: #E1A6B3; }
.grnn-line-status--exc   { background: var(--sd-blue-100);  color: var(--sd-blue-700); border-color: #B7CEDF; }
.grnn-line-status--mixed { background: var(--sd-line-100);  color: var(--sd-ink-700); border-color: var(--sd-line-300); }
.grnn-line-status--blank { background: transparent; color: var(--sd-ink-300); border: 1px dashed var(--sd-line-300); }

/* Lines table — slightly wider table; variance columns */
.grnn-lines thead th.var-col { width: 56px; text-align: center; }
.grnn-lines tbody td.var-col { padding: 8px 6px; text-align: center; }
.grnn-lines tbody tr.is-off-po td:first-child { box-shadow: inset 2px 0 0 var(--sd-blue-600); }
.grnn-lines__off-po-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sd-blue-600);
  background: var(--sd-blue-050);
  border: 1px solid #B7CEDF;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
}

/* Scan input — sits in lines-bar */
.grnn-scan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-sm);
  padding: 0 8px;
  height: 30px;
  width: 220px;
}
.grnn-scan svg { width: 14px; height: 14px; color: var(--sd-teal-600); flex-shrink: 0; }
.grnn-scan input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--sd-font);
  font-size: 12px;
  color: var(--sd-ink-900);
}
.grnn-scan input::placeholder { color: var(--sd-ink-400); font-weight: 400; }
.grnn-scan__kbd {
  font-family: var(--sd-mono);
  font-size: 9.5px;
  color: var(--sd-ink-400);
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-200);
  border-radius: 3px;
  padding: 1px 4px;
  font-weight: 500;
  white-space: nowrap;
}
.grnn-scan__indicator {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sd-teal-600);
  box-shadow: 0 0 0 3px rgba(23,162,184,.22);
}


/* ============================================================
   ITEM PICKER DRAWER — slide-in from right
   ============================================================ */
.grnn-picker-scrim {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .32);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.grnn-picker-scrim.is-on { opacity: 1; pointer-events: auto; }

.grnn-picker-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 520px;
  background: #fff;
  z-index: 81;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(15, 28, 46, .18);
  transform: translateX(100%);
  transition: transform 180ms ease;
}
.grnn-picker-drawer.is-on { transform: translateX(0); }

.grnn-picker-drawer__head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--sd-line-100);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grnn-picker-drawer__title-row {
  display: flex; align-items: center; justify-content: space-between;
}
.grnn-picker-drawer__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--sd-ink-900);
}
.grnn-picker-drawer__close {
  appearance: none; background: transparent; border: 0;
  width: 28px; height: 28px; padding: 0;
  border-radius: 50%;
  color: var(--sd-ink-500); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.grnn-picker-drawer__close:hover { background: var(--sd-line-100); color: var(--sd-ink-900); }
.grnn-picker-drawer__close svg { width: 14px; height: 14px; }

.grnn-picker-drawer__search {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--sd-teal-600);
  border-radius: var(--sd-radius-sm);
  padding: 0 10px;
  height: 38px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23,162,184,.18);
}
.grnn-picker-drawer__search svg { width: 14px; height: 14px; color: var(--sd-ink-500); flex-shrink: 0; }
.grnn-picker-drawer__search input {
  flex: 1; border: 0; outline: none;
  background: transparent;
  font-family: var(--sd-font);
  font-size: 13px;
  color: var(--sd-ink-900);
  font-weight: 500;
}
.grnn-picker-drawer__search input::placeholder { color: var(--sd-ink-400); font-weight: 400; }
.grnn-picker-drawer__search-ready {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px;
  color: var(--sd-teal-600);
  font-weight: 500;
}
.grnn-picker-drawer__search-ready .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sd-teal-600);
  animation: pulseScan 1.6s ease-in-out infinite;
}
@keyframes pulseScan {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(23,162,184,.4); }
  50%      { opacity: .6; box-shadow: 0 0 0 4px rgba(23,162,184,0); }
}

.grnn-picker-drawer__scope {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--sd-ink-500);
}
.grnn-picker-drawer__scope-toggle {
  appearance: none; background: transparent; border: 0;
  font: inherit; color: var(--sd-blue-600); cursor: pointer;
  text-decoration: underline; padding: 0;
}

.grnn-picker-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.grnn-picker-section {
  padding: 12px 18px 6px;
}
.grnn-picker-section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.grnn-picker-section__caps {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sd-ink-500);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.grnn-picker-section__caps svg { width: 11px; height: 11px; color: var(--sd-amber-500); }
.grnn-picker-section__count {
  font-family: var(--sd-mono);
  font-size: 10.5px;
  color: var(--sd-ink-400);
}

.grnn-picker-item {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--sd-radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
}
.grnn-picker-item:hover { background: var(--sd-blue-050); }
.grnn-picker-item.is-selected {
  background: var(--sd-teal-050);
  border-color: rgba(23,162,184,.35);
}
.grnn-picker-item input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--sd-teal-600);
}
.grnn-picker-item__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.grnn-picker-item__title {
  font-size: 12.5px;
  color: var(--sd-ink-900);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.grnn-picker-item__code {
  font-family: var(--sd-mono);
  font-size: 11px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-200);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
  color: var(--sd-ink-900);
}
.grnn-picker-item__meta {
  font-size: 11px;
  color: var(--sd-ink-500);
}
.grnn-picker-item__uom {
  font-size: 11px;
  color: var(--sd-ink-500);
  text-align: right;
  min-width: 26px;
}
.grnn-picker-item__rate {
  font-family: var(--sd-mono);
  font-size: 11.5px;
  color: var(--sd-ink-700);
  text-align: right;
  font-weight: 500;
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.grnn-picker-item__rate sub {
  display: block;
  font-family: var(--sd-font);
  font-size: 9.5px;
  color: var(--sd-ink-400);
  font-weight: 400;
  margin-top: 1px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.grnn-picker-empty {
  padding: 36px 24px;
  text-align: center;
  color: var(--sd-ink-500);
  font-size: 12.5px;
}
.grnn-picker-empty__art {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  background: var(--sd-bg-soft);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sd-ink-400);
}
.grnn-picker-empty__art svg { width: 26px; height: 26px; }
.grnn-picker-empty__title {
  color: var(--sd-ink-900); font-weight: 500;
  margin-bottom: 4px; font-size: 13px;
}

.grnn-picker-drawer__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--sd-line-100);
  background: var(--sd-bg-softer);
  display: flex;
  align-items: center;
  gap: 12px;
}
.grnn-picker-drawer__foot-sum {
  flex: 1;
  font-size: 12px;
  color: var(--sd-ink-700);
}
.grnn-picker-drawer__foot-sum strong { color: var(--sd-ink-900); font-weight: 600; }
.grnn-picker-drawer__foot-btn {
  appearance: none;
  background: var(--sd-blue-600);
  border: 1px solid var(--sd-blue-600);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--sd-radius-sm);
  cursor: pointer;
}
.grnn-picker-drawer__foot-btn:hover { background: var(--sd-blue-700); border-color: var(--sd-blue-700); }
.grnn-picker-drawer__foot-btn:disabled {
  background: var(--sd-line-100);
  border-color: var(--sd-line-300);
  color: var(--sd-ink-400);
  cursor: not-allowed;
}
.grnn-picker-drawer__foot-btn--ghost {
  background: transparent; color: var(--sd-ink-700); border-color: var(--sd-line-300);
  text-transform: none; letter-spacing: 0;
}
.grnn-picker-drawer__foot-btn--ghost:hover {
  background: var(--sd-bg-soft); border-color: var(--sd-ink-400); color: var(--sd-ink-900);
}

/* ============================================================
   INVOICE PENDING — collapsed disclosure
   ============================================================ */
.grnn-disclosure {
  margin-top: 14px;
  background: #fff;
  border: 1px dashed #EBC07B;
  border-radius: var(--sd-radius-md);
  overflow: hidden;
}
.grnn-disclosure__head {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--sd-amber-text);
}
.grnn-disclosure__head svg { width: 14px; height: 14px; }
.grnn-disclosure__head .chev {
  margin-left: auto;
  color: var(--sd-ink-500);
  transition: transform 150ms ease;
}
.grnn-disclosure.is-open .grnn-disclosure__head .chev { transform: rotate(180deg); }
.grnn-disclosure__title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sd-ink-900);
}
.grnn-disclosure__sub {
  font-size: 11.5px;
  color: var(--sd-ink-500);
  margin-left: 6px;
}
.grnn-disclosure__body {
  display: none;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--sd-line-100);
  background: #FFFBEF;
}
.grnn-disclosure.is-open .grnn-disclosure__body { display: block; }


/* ============================================================
   LIVE 3-WAY PREVIEW (sidebar mini)
   ============================================================ */
.grnn-3way-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grnn-3way-mini__dots {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.grnn-3way-mini__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-200);
  border-radius: var(--sd-radius-sm);
}
.grnn-3way-mini__node-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--sd-green-600);
}
.grnn-3way-mini__node-dot.is-warn { background: var(--sd-amber-500); }
.grnn-3way-mini__node-dot.is-bad  { background: var(--sd-red-600); }
.grnn-3way-mini__node-dot.is-pending {
  background: #fff;
  border: 1.5px dashed var(--sd-ink-300);
}
.grnn-3way-mini__node-caps {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sd-ink-500);
}
.grnn-3way-mini__node-val {
  font-family: var(--sd-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--sd-ink-900);
  font-variant-numeric: tabular-nums;
}
.grnn-3way-mini__verdict {
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  padding: 6px;
  border-radius: var(--sd-radius-sm);
  color: var(--sd-green-600);
  background: var(--sd-green-100);
  border: 1px solid #c4dfcf;
}
.grnn-3way-mini__verdict.is-warn {
  color: var(--sd-amber-text); background: var(--sd-amber-100); border-color: #EBC07B;
}
.grnn-3way-mini__verdict.is-bad {
  color: #A8273F; background: var(--sd-red-100); border-color: #E1A6B3;
}
.grnn-3way-mini__verdict.is-pending {
  color: var(--sd-ink-500); background: var(--sd-bg-soft); border-color: var(--sd-line-300);
}


/* ============================================================
   PO / INVOICE PICKER ROWS — variants of the .grnn-picker-item
   These pickers share the drawer chrome but have richer rows
   (status pill, % received bar, line count).
   ============================================================ */
.grnn-picker-item--po {
  grid-template-columns: 1fr auto auto;
}
.grnn-picker-item--po .grnn-picker-item__id {
  font-family: var(--sd-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sd-ink-900);
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.grnn-picker-item--po .grnn-picker-item__supplier {
  font-size: 11.5px;
  color: var(--sd-ink-700);
  margin-top: 2px;
}
.grnn-picker-item--po .grnn-picker-item__date {
  font-family: var(--sd-mono);
  font-size: 10.5px;
  color: var(--sd-ink-500);
  letter-spacing: 0;
}

/* "Received against" mini-bar */
.grnn-rcv-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--sd-ink-700);
}
.grnn-rcv-bar__track {
  width: 60px;
  height: 5px;
  background: var(--sd-line-100);
  border-radius: 999px;
  overflow: hidden;
}
.grnn-rcv-bar__fill {
  display: block;
  height: 100%;
  background: var(--sd-green-600);
  border-radius: 999px;
}
.grnn-rcv-bar__fill.is-partial { background: var(--sd-amber-500); }
.grnn-rcv-bar__fill.is-full    { background: var(--sd-line-300); }
.grnn-rcv-bar__pct {
  font-family: var(--sd-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--sd-ink-500);
  min-width: 30px;
}
.grnn-rcv-bar--full .grnn-rcv-bar__pct { color: var(--sd-ink-400); }

/* Status pill specifically for PO/Invoice picker rows (smaller) */
.grnn-picker-status {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.grnn-picker-status--approved   { background: var(--sd-blue-100);  color: var(--sd-blue-700); }
.grnn-picker-status--dispatched { background: var(--sd-amber-100); color: var(--sd-amber-text); }
.grnn-picker-status--partial    { background: var(--sd-amber-100); color: var(--sd-amber-text); }
.grnn-picker-status--linked     { background: var(--sd-line-100);  color: var(--sd-ink-500); }

/* PO row gets a value column on the right */
.grnn-picker-item--po .grnn-picker-item__value {
  font-family: var(--sd-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sd-ink-900);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 72px;
}

/* Single-pick mode: no checkboxes, whole row is the click target */
.grnn-picker-item--single {
  grid-template-columns: 1fr auto auto;
}
.grnn-picker-item--single::after {
  content: '';
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--sd-ink-300);
  align-self: center;
  transform: rotate(-90deg);
  margin-left: 4px;
}
.grnn-picker-item--single:hover::after { border-top-color: var(--sd-blue-600); }
.grnn-picker-item--disabled {
  opacity: .5;
  pointer-events: none;
}
.grnn-picker-item--disabled .grnn-picker-item__id {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Picker filter chip row at top of drawer body */
.grnn-picker-filters {
  display: flex;
  gap: 6px;
  padding: 8px 18px 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--sd-line-100);
  background: var(--sd-bg-softer);
}
.grnn-picker-filter {
  appearance: none;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: 999px;
  padding: 3px 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--sd-ink-700);
  cursor: pointer;
}
.grnn-picker-filter:hover { background: var(--sd-blue-050); border-color: var(--sd-blue-600); color: var(--sd-blue-700); }
.grnn-picker-filter.is-on {
  background: var(--sd-blue-600);
  border-color: var(--sd-blue-600);
  color: #fff;
}
.grnn-picker-filter .cnt {
  font-family: var(--sd-mono);
  font-size: 10px;
  opacity: .8;
  margin-left: 4px;
}