/*
 * Supplier Lifecycle Management (/solutions/supplier-lifecycle-management/) —
 * page assets.
 *
 * Enqueued for this one `solution` post only (see
 * iss_enqueue_supplier_lifecycle_assets() in functions.php), declaring
 * `iss-global` as a dependency so it lands after it and can override it.
 *
 * WHY A SEPARATE FILE. Two kinds of rule live here and they are worth telling
 * apart:
 *
 *   §1-§2 are PAGE-SCOPED CORRECTIONS — the anchor capability's top rule, and
 *   which side each capability's panel sits on. The side is derived from the
 *   list index in the shared template and the V14 Clean HTML runs it the other
 *   way round; inverting the shared derivation would flip Purchasing, Invoice &
 *   AP and Business Process Workflows too, so it is corrected here, on
 *   `.iss-solution-<slug>`. (The zebra PHASE was the same kind of problem and is
 *   now a template field, `cap_detail_zebra_start` — this page wants its
 *   default, so it sets nothing.)
 *
 *   §3-§8 are the FIRST STYLING for components single-solution.php now emits
 *   from new, unset-elsewhere fields (a panel completeness header, a
 *   possible-match callout, a panel summary grid, a QAD execution chain and its
 *   word-value tiles, a capability back-link, a proof pull-quote). They are
 *   generic by shape, not supplier-specific — the moment a second page sets one
 *   of those fields, the rule should MOVE to iss-global.css rather than be
 *   copied into that page's file. They start here because iss-global.css is the
 *   file every concurrent page build is queued on.
 *
 * Selectors carry `.iss-page` so specificity matches iss-global's and the
 * override order is the load order, not a specificity race.
 *
 * Values are the V14 Clean HTML's own. Where it uses a hex with no --iss-*
 * token the hex is kept rather than rounded to the nearest token: the panels
 * are a tinted state system (amber possible-match, green passed, navy
 * restricted) and snapping them to the site palette is what would stop them
 * reading as states.
 */

/* ============================================================
   1. CAPABILITY DETAIL — the anchor capability's top rule
   ============================================================ */
/*
 * The zebra itself needs nothing here. iss-global.css §24c's
 * `.iss-cap-detail-soft` and single-solution.php's `cap_detail_zebra_start`
 * already tint 01 / 03 / 05 by default, which is V14's own phase
 * (`.capability-detail.alt`).
 *
 * `.capability-detail.anchor-detail` — capability 01 is this page's anchor and
 * V14 rules it off at the top. It is the only one of the six with the rule, so
 * it is keyed on that section's id rather than on the list's first item.
 */
.iss-page.iss-solution-supplier-lifecycle-management #cap-supplier-onboarding {
	border-top: 3px solid #8dcdf2;
}

/* ============================================================
   2. CAPABILITY DETAIL — which side the panel sits on
   ============================================================ */
/*
 * V14 alternates copy-left / panel-right on 01, 03, 05 and the reverse on 02,
 * 04, 06. The template's `$visual_first` starts the alternation on the other
 * foot, so `.iss-cap-detail-flip` lands on 01 / 03 / 05 — one phase out. Undo
 * it and apply it to the others, rather than inverting the shared derivation.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-detail-flip .iss-cap-visual {
	order: 0;
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-detail-in-visual:not(.iss-cap-detail-flip) .iss-cap-visual {
	order: -1;
}
@media (max-width: 900px) {
	/* Stacked, the panel reads after the copy it illustrates, in all six. */
	.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-detail-in-visual:not(.iss-cap-detail-flip) .iss-cap-visual {
		order: 0;
	}
}

/* ============================================================
   3. CAPABILITY PANEL — completeness header (`.validation-score`)
   ============================================================ */
.iss-page .iss-cap-visual-score {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	margin-bottom: 13px;
	padding: 14px 15px;
	border: 1px solid #cfe5f2;
	border-radius: 13px;
	background: #f4fbff;
}
.iss-page .iss-cap-visual-score strong {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	color: var(--iss-ink);
}
.iss-page .iss-cap-visual-score span {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--iss-muted);
}
.iss-page .iss-cap-visual-score .iss-cap-visual-score-badge {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 50%;
	background: #e4f6f0;
	color: var(--iss-green);
	font-size: 14px;
	font-weight: 900;
}

/* ============================================================
   4. CAPABILITY PANEL — possible-match callout (`.match-box`)
   ============================================================ */
/*
 * Amber, not the panel's usual blue: this box is the one place in the six
 * panels where the workflow has stopped and is waiting on a person's judgement,
 * and it needs to read differently from the four PASSED rows above it.
 */
.iss-page .iss-cap-visual-match {
	margin-top: 13px;
	padding: 14px;
	border: 1px solid #efd7ae;
	border-radius: 13px;
	background: #fff9ed;
}
.iss-page .iss-cap-visual-match-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}
.iss-page .iss-cap-visual-match-head b {
	font-size: 12px;
	color: var(--iss-ink);
}
.iss-page .iss-cap-visual-match-head span {
	flex: none;
	padding: 5px 7px;
	border-radius: 999px;
	background: #fff0d4;
	color: var(--iss-amber);
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.iss-page .iss-cap-visual-match p {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: #6b614e;
}

/* ============================================================
   5. CAPABILITY PANEL — summary grid (`.governance-mini`)
   ============================================================ */
.iss-page .iss-cap-visual-mini {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin-top: 15px;
}
.iss-page .iss-cap-visual-mini > div {
	padding: 11px;
	border-radius: 10px;
	background: #f3f8fb;
}
.iss-page .iss-cap-visual-mini b {
	display: block;
	font-size: 12.5px;
	color: var(--iss-ink);
}
.iss-page .iss-cap-visual-mini span {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.45;
	color: var(--iss-muted);
}
@media (max-width: 560px) {
	.iss-page .iss-cap-visual-mini { grid-template-columns: 1fr; }
}

/* ============================================================
   6. CAPABILITY PANEL — glyph rows, and the dark control-review panel
   ============================================================ */
/*
 * A row can carry one leading glyph (a "$" for banking, "1"-"4" for a lifecycle
 * stage). The row is a flex box already, so the glyph is just a third flex item
 * pinned to the front — no grid change, and a row without one is untouched.
 */
.iss-page .iss-cap-visual-row-glyph { gap: 11px; }
/*
 * The text block FILLS. Without this the row is glyph / shrink-to-fit text /
 * tag under `justify-content: space-between`, so each label starts wherever its
 * own tag's width leaves it — "ONBOARD" at 300px and "DEACTIVATE" at 331px down
 * the same panel. V14 draws these as a `46px 1fr auto` grid, which is the same
 * intent.
 */
.iss-page .iss-cap-visual-row-glyph > div { flex: 1 1 auto; min-width: 0; }
.iss-page .iss-cap-visual-glyph {
	flex: none;
	order: -1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #e8f5fd;
	color: var(--iss-blue);
	font-size: 14px;
	font-weight: 900;
}
/*
 * `.risk-visual` — capability 04's panel alone is dark in V14, on a section
 * that stays light. `cap_4_dark` would have darkened the whole section, so this
 * is the panel only.
 */
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual {
	border-color: #183e58;
	background: linear-gradient(145deg, var(--iss-navy-2), var(--iss-navy-3));
	color: #fff;
}
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual-toolbar {
	border-bottom-color: rgba(255, 255, 255, .12);
	color: #c9e0eb;
}
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual-dots i {
	background: rgba(255, 255, 255, .28);
}
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual-row {
	border-color: rgba(255, 255, 255, .11);
	background: rgba(255, 255, 255, .055);
}
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual-row b { color: #fff; }
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual-row span { color: #aac5d4; }
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual-glyph {
	background: #0d4f77;
	color: #9ee6f6;
}
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual-tag,
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual-tag-good,
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual-tag-warn {
	background: rgba(57, 195, 230, .12);
	color: var(--iss-sky);
}
/* `.risk-footer` — a ruled panel of its own, not the light footer's grey line. */
.iss-page.iss-solution-supplier-lifecycle-management #cap-fraud-compliance-controls .iss-cap-visual-footer {
	margin-top: 14px;
	padding: 13px;
	border: 1px solid rgba(143, 226, 245, .28);
	border-radius: 11px;
	color: #d8eff6;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
}

/* ============================================================
   7. REAL-TIME QAD INTEGRATION — execution chain + stat tiles
   ============================================================ */
.iss-page .iss-qad-exec {
	display: grid;
	grid-template-columns: repeat(var(--iss-cols, 4), 1fr);
	align-items: center;
	gap: 10px;
}
.iss-page .iss-qad-exec-node {
	position: relative;
	min-height: 120px;
	padding: 20px 12px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 13px;
	background: rgba(255, 255, 255, .075);
	text-align: center;
}
/* The arrow straddles the gap to the next node, so the last one has none. */
.iss-page .iss-qad-exec-node::after {
	content: "→";
	position: absolute;
	right: -10px;
	top: 44%;
	color: #79d7ec;
	font-weight: 900;
}
.iss-page .iss-qad-exec-node:last-child::after { display: none; }
.iss-page .iss-qad-exec-num {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0 auto;
	border-radius: 9px;
	background: #0f5c89;
	color: #9ee8f6;
	font-family: var(--iss-mono);
	font-size: 13px;
	font-weight: 700;
}
.iss-page .iss-qad-exec-node b {
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	letter-spacing: .03em;
	color: #fff;
}

.iss-page .iss-qad-stats {
	display: grid;
	grid-template-columns: repeat(var(--iss-cols, 4), 1fr);
	gap: 12px;
	margin-top: 18px;
}
.iss-page .iss-qad-stat {
	padding: 15px;
	border: 1px solid #24495e;
	border-radius: 13px;
	background: var(--iss-navy);
	text-align: center;
}
/*
 * 16px, not display size. The value here is a WORD ("Real-Time", "Complete"),
 * which is why these are their own tiles rather than `qad_stat_*`'s metrics —
 * that component sets its value at clamp(34px…), correct for a figure and
 * wrong for a word.
 */
.iss-page .iss-qad-stat strong {
	display: block;
	color: #fff;
	font-size: 16px;
	line-height: 1.25;
}
.iss-page .iss-qad-stat span {
	display: block;
	margin-top: 4px;
	font-family: var(--iss-mono);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9db8c8;
}
@media (max-width: 980px) {
	.iss-page .iss-qad-exec,
	.iss-page .iss-qad-stats { grid-template-columns: 1fr 1fr; }
	.iss-page .iss-qad-exec-node::after { display: none; }
}
@media (max-width: 620px) {
	.iss-page .iss-qad-exec,
	.iss-page .iss-qad-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   8. CAPABILITY BACK-LINK + CUSTOMER PROOF PULL-QUOTE
   ============================================================ */
/* `.section-return` — a text link, deliberately not a button. */
.iss-page .iss-cap-detail-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	color: var(--iss-blue);
	font-size: 13px;
	font-weight: 800;
}
.iss-page .iss-cap-detail-back:hover { color: var(--iss-blue-dark); }
.iss-page .iss-cap-detail-back .iss-arw-up { transition: transform .2s; }
.iss-page .iss-cap-detail-back:hover .iss-arw-up { transform: translateY(-3px); }
.iss-page .iss-cap-detail-dark .iss-cap-detail-back { color: var(--iss-sky); }

/* `.proof-quote` */
.iss-page .iss-snap-teaser-quote {
	margin: 23px 0;
	padding: 0 0 0 18px;
	border-left: 4px solid var(--iss-cyan);
	background: none;
	color: #42596c;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
}

/* ============================================================
   9. WORKFLOW SNAPSHOT — the anchor step, and the last one
   ============================================================ */
/*
 * The shared template tints the LAST step as the execution end-state, which is
 * right on the pages whose final step is a conditional branch resolving into
 * QAD. V14 paints "05 · Create in QAD" white and puts its emphasis on step 01
 * instead, so the tint here would read as two entry points.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-wf-step.iss-wf-execute {
	background: var(--iss-card);
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-wf-step.iss-wf-execute:hover {
	background: #fbfdff;
}
/*
 * `.anchor-emphasis`. Step 01 is the page's anchor capability, and V14 marks it
 * with a bordered tint and a FILLED icon tile — the badge beside it reads
 * "START HERE", so the card has to look like the entry point. The tint itself
 * already arrives from the shared `.iss-wf-approval` tone, derived from that
 * badge; this adds the border and the filled tile.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-wf-step:first-child {
	border: 1px solid #cde8f8;
	background: linear-gradient(135deg, #eaf6fd, #f8fcff);
}
.iss-page.iss-solution-supplier-lifecycle-management .iss-wf-step:first-child .iss-wf-ico {
	background: var(--iss-blue);
	color: #fff;
}

/* ============================================================
   10. CAPABILITY GRID — the anchor card
   ============================================================ */
/*
 * `.cap-card.featured`. Capability 01 is the anchor the whole page is built
 * around — it carries the "Anchor Capability" tag inside the card and the top
 * rule on its detail module below — so V14 gives its card a heavier border and
 * a tinted ground rather than leaving it identical to the other five.
 *
 * `:first-child`, because it is the FIRST card that leads, not the supplier-
 * onboarding one specifically: reorder the capabilities in wp-admin and the
 * emphasis should follow the position, the way the ordinals do.
 */
.iss-page.iss-solution-supplier-lifecycle-management .iss-cap-grid > :first-child {
	border: 2px solid #8dcdf2;
	background: linear-gradient(145deg, #f5fbff, var(--iss-card));
}