/* ============================================================================
   grn-dual.css — dual-source GRN additions (Internal + API-ingested)
   Layered on top of console.css / module-accents.css. Adds:
     - Source column + .src-badge (Internal vs API)
     - 3-way match column (.match3) with PO ↔ INV ↔ GRN pips
     - .row__sub--ext sub-line for external GRN numbers
     - ingest exceptions KPI tile colouring
     - external-source header block on detail (.pid__ext)
     - 3-way match detail panel (.match3-panel) for the centerpiece
     - ingest exceptions list chrome (.ingest)
   ========================================================================= */


/* ---------- Source column geometry ---------- */
.cons__head  .th--source  { flex: 0 0 96px; }
.row         .td--source  { flex: 0 0 96px; }
.cons__totals .td--source { flex: 0 0 96px; }


/* ---------- Source badges ---------- */
.src-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  border: 1px solid transparent;
}
.src-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.src-badge--internal {
  background: var(--sd-bg-soft);
  color: var(--sd-ink-700);
  border-color: var(--sd-line-300);
}
.src-badge--api {
  background: var(--sd-teal-050);
  color: #0D5F6B;
  border-color: rgba(23, 162, 184, .35);
}
.src-badge--api svg { color: var(--sd-teal-600); }


/* ---------- inv-no sub-line for external GRN number ---------- */
.row .inv-sub--ext {
  font-family: var(--sd-mono);
  font-size: 11px;
  color: var(--sd-teal-600);
  letter-spacing: 0;
}
.row .inv-sub--ext::before {
  content: '↑ ext ';
  font-family: var(--sd-font);
  color: var(--sd-ink-400);
  font-weight: 500;
}


/* ---------- 3-way match column cell ---------- */
.match3 {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.match3__dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.match3__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--sd-line-300);
  border: 1px solid var(--sd-line-300);
}
.match3__dot.is-ok   { background: var(--sd-green-600); border-color: var(--sd-green-600); }
.match3__dot.is-bad  { background: var(--sd-red-600);   border-color: var(--sd-red-600); }
.match3__dot.is-warn { background: var(--sd-amber-500); border-color: var(--sd-amber-500); }
.match3__dot.is-none {
  background: #fff;
  border: 1px dashed var(--sd-ink-300);
}
.match3__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--sd-ink-700);
  letter-spacing: 0;
}
.match3__sep {
  width: 6px;
  height: 1px;
  background: var(--sd-line-300);
  display: inline-block;
}
.match3.is-mismatch .match3__label { color: var(--sd-red-600); }
.match3.is-partial  .match3__label { color: var(--sd-ink-500); }
.match3.is-pending  .match3__label { color: var(--sd-ink-400); }


/* ---------- Status pill: ingest exception ---------- */
.pill.s-ingest {
  background: #F8E3DC;
  color: #8B3A1B;
}

/* ---------- KPI seg: ingest tile (uses --red but muted) ---------- */
.kpiseg--ingest .kpiseg__count {
  color: var(--sd-ink-900);
}
.kpiseg--ingest::before {
  background: var(--sd-red-600);
}
/* dotted icon to flag "feed" theme for ingest tile */
.kpiseg__plug {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sd-mono);
  font-size: 10.5px;
  color: var(--sd-teal-600);
  letter-spacing: .02em;
}
.kpiseg__plug svg { width: 12px; height: 12px; flex-shrink: 0; }


/* ---------- Sub-strip Source filter (Internal / API segmented) ----------
   Lives between view chips and toolbar, scoped to GRN module. */
.src-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-md);
}
.src-filter__opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sd-ink-700);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.src-filter__opt svg { width: 12px; height: 12px; }
.src-filter__opt:hover { color: var(--sd-ink-900); }
.src-filter__opt.is-on {
  background: #fff;
  color: var(--sd-ink-900);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.src-filter__opt .cnt {
  font-family: var(--sd-mono);
  font-size: 11px;
  color: var(--sd-ink-500);
  font-weight: 500;
}


/* =============================================================
   GRN DETAIL — external source header block
   ============================================================= */
.pid__ext {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, var(--sd-teal-050) 0%, #fff 100%);
  border: 1px solid rgba(23, 162, 184, .3);
  border-left: 3px solid var(--sd-teal-600);
  border-radius: var(--sd-radius-md);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.pid__ext-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(23, 162, 184, .35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-teal-600);
}
.pid__ext-icon svg { width: 22px; height: 22px; }
.pid__ext-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pid__ext-caps {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sd-teal-600);
}
.pid__ext-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--sd-ink-900);
  line-height: 1.35;
}
.pid__ext-title .mono {
  font-family: var(--sd-mono);
  font-weight: 500;
  font-size: 13.5px;
  background: #fff;
  border: 1px solid rgba(23, 162, 184, .3);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--sd-ink-900);
}
.pid__ext-meta {
  font-size: 11.5px;
  color: var(--sd-ink-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pid__ext-meta .sep {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--sd-line-300);
}
.pid__ext-meta .mono { font-family: var(--sd-mono); color: var(--sd-ink-700); }
.pid__ext-readonly {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  color: var(--sd-ink-700);
  font-weight: 500;
}
.pid__ext-readonly svg { width: 12px; height: 12px; color: var(--sd-ink-500); }


/* =============================================================
   GRN DETAIL — 3-way match centerpiece panel
   ============================================================= */
.match3-panel {
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: var(--sd-radius-md);
  padding: 18px 20px 20px;
  margin: 22px 0;
}
.match3-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.match3-panel__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--sd-ink-900);
  letter-spacing: -0.005em;
}
.match3-panel__title .count {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-300);
  border-radius: 999px;
  font-family: var(--sd-mono);
  font-size: 11px;
  color: var(--sd-ink-500);
  font-weight: 500;
  margin-left: 8px;
  letter-spacing: 0;
}
.match3-panel__summary {
  font-size: 12px;
  color: var(--sd-ink-500);
}
.match3-panel__summary strong { color: var(--sd-ink-900); font-weight: 600; }

/* the 3-pip bar */
.match3-panel__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-200);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 18px;
}
.match3-panel__node {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 14px;
  position: relative;
  text-align: center;
}
.match3-panel__node-caps {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sd-ink-500);
}
.match3-panel__node-id {
  font-family: var(--sd-mono);
  font-size: 12px;
  color: var(--sd-ink-700);
  font-weight: 500;
}
.match3-panel__node-id a { color: var(--sd-blue-600); text-decoration: none; }
.match3-panel__node-id a:hover { text-decoration: underline; }
.match3-panel__node-val {
  font-size: 16px;
  font-weight: 600;
  color: var(--sd-ink-900);
  font-variant-numeric: tabular-nums;
}
.match3-panel__edge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  min-width: 90px;
}
.match3-panel__edge-line {
  width: 100%;
  height: 2px;
  background: var(--sd-green-600);
  position: relative;
}
.match3-panel__edge-line.is-bad  { background: var(--sd-red-600); }
.match3-panel__edge-line.is-warn { background: var(--sd-amber-500); }
.match3-panel__edge-line.is-none { background: var(--sd-line-200); height: 0; border-top: 1.5px dashed var(--sd-ink-300); }
.match3-panel__edge-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--sd-green-600);
  margin-top: 4px;
  letter-spacing: 0;
  text-align: center;
}
.match3-panel__edge-line.is-bad ~ .match3-panel__edge-label,
.match3-panel__edge .is-bad-text { color: var(--sd-red-600); }
.match3-panel__edge-line.is-warn ~ .match3-panel__edge-label { color: var(--sd-amber-text); }
.match3-panel__edge-line.is-none ~ .match3-panel__edge-label { color: var(--sd-ink-400); }


/* per-line variance mini-table */
.match3-panel__lines {
  border: 1px solid var(--sd-line-200);
  border-radius: 6px;
  overflow: hidden;
}
.match3-panel__lrow {
  display: grid;
  grid-template-columns: 1fr 90px 90px 90px 110px 120px;
  align-items: center;
  padding: 9px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--sd-line-200);
}
.match3-panel__lrow:last-child { border-bottom: none; }
.match3-panel__lrow.is-head {
  background: var(--sd-bg-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sd-ink-500);
  padding: 7px 14px;
}
.match3-panel__lrow .name { color: var(--sd-ink-900); font-weight: 500; }
.match3-panel__lrow .qty {
  text-align: right;
  font-family: var(--sd-mono);
  font-variant-numeric: tabular-nums;
}
.match3-panel__lrow .var {
  text-align: right;
  font-family: var(--sd-mono);
  font-weight: 600;
}
.match3-panel__lrow .var.is-bad  { color: var(--sd-red-600); }
.match3-panel__lrow .var.is-ok   { color: var(--sd-green-600); }
.match3-panel__lrow .var.is-warn { color: var(--sd-amber-text); }
.match3-panel__lrow .verdict {
  text-align: right;
}
.match3-panel__lrow.is-bad { background: rgba(220, 53, 69, 0.04); }


/* ============================================================
   INVOICE LINKAGE (for internal GRNs without invoice yet)
   ============================================================ */
.inv-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--sd-bg-soft);
  border: 1px dashed var(--sd-ink-300);
  border-radius: var(--sd-radius-md);
  margin: 18px 0;
}
.inv-link__icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sd-ink-500);
  flex-shrink: 0;
}
.inv-link__body {
  flex: 1;
  font-size: 12.5px;
  color: var(--sd-ink-700);
  line-height: 1.4;
}
.inv-link__body strong { color: var(--sd-ink-900); font-weight: 600; }
.inv-link__action {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  color: var(--sd-ink-900);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.inv-link__action:hover { border-color: var(--sd-teal-600); color: var(--sd-teal-600); }
.inv-link__action svg { width: 12px; height: 12px; }


/* ============================================================
   INGEST EXCEPTIONS page — list chrome additions
   ============================================================ */
.ingest-reason {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
}
.ingest-reason--unknown { background: var(--sd-red-100); color: #8B2A2A; }
.ingest-reason--sku     { background: var(--sd-amber-100); color: var(--sd-amber-text); }
.ingest-reason--dupe    { background: var(--sd-line-100); color: var(--sd-ink-700); }
.ingest-reason svg { width: 11px; height: 11px; }

.row .td--reason     { flex: 0 0 160px; }
.cons__head .th--reason { flex: 0 0 160px; }

.row .td--ext-grn { flex: 0 0 160px; }
.cons__head .th--ext-grn { flex: 0 0 160px; }

.row .td--ext-grn .ext-grn {
  font-family: var(--sd-mono);
  font-size: 12.5px;
  color: var(--sd-ink-900);
  font-weight: 500;
}
.row .td--ext-grn .ext-src {
  font-size: 11px;
  color: var(--sd-teal-600);
  display: block;
  margin-top: 2px;
}

.row .td--invoice-raw {
  font-family: var(--sd-mono);
  font-size: 12.5px;
  color: var(--sd-ink-700);
}
.row .td--invoice-raw .raw-warn { color: var(--sd-ink-400); font-style: italic; font-family: var(--sd-font); font-size: 11.5px; }

.resolve-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  background: #fff;
  border: 1px solid var(--sd-line-300);
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sd-ink-900);
  text-decoration: none;
  cursor: pointer;
}
.resolve-btn:hover { border-color: var(--sd-teal-600); color: var(--sd-teal-600); }
.resolve-btn svg { width: 11px; height: 11px; }


/* ============================================================
   GRN DETAIL — source-driven visibility
   pid[data-source="external"]  → hide editable affordances
   pid[data-source="internal"]  → hide ext header & ext readonly note
   ============================================================ */
.pid__ext { display: none; }
.pid[data-source="external"] .pid__ext { display: grid; }
.pid[data-source="external"] .pid__btn--primary,
.pid[data-source="external"] [data-internal-only] { display: none !important; }
.pid[data-source="external"] .inv-link { display: none !important; }
.pid[data-source="external"] .pid__activity-edit { display: none !important; }
.pid[data-source="internal"] [data-external-only] { display: none !important; }

/* Source badge in pid header (small inline pill) */
.pid__source-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
}
.pid__source-tag svg { width: 11px; height: 11px; }
.pid[data-source="internal"] .pid__source-tag {
  background: var(--sd-bg-soft);
  border: 1px solid var(--sd-line-300);
  color: var(--sd-ink-700);
}
.pid[data-source="external"] .pid__source-tag {
  background: var(--sd-teal-050);
  border: 1px solid rgba(23,162,184,.35);
  color: var(--sd-teal-600);
}