/* ═══════════════════════════════════════════════════════════════
   Dashboard Metrics + Workspace
   ═══════════════════════════════════════════════════════════════ */

.wsscd-main-dashboard {
	--wsscd-dm-gap: var(--wsscd-space-4);
	--wsscd-dm-gap-lg: var(--wsscd-space-5);
	--wsscd-dm-radius: var(--wsscd-radius-sm);
	--wsscd-dm-border: var(--wsscd-border);
	--wsscd-dm-surface-muted: var(--wsscd-surface-muted);
}

/* ═══════════════════════════════════════════════════════════════
   Catalog Snapshot
   Layout: KPI strip → summary bar → per-category accordion
           (each group has coverage bar + product mini-cards)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Empty State ──────────────────────────────────────────── */

.wsscd-catalog-snapshot__empty {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-md);
	padding: var(--wsscd-spacing-md) var(--wsscd-spacing-base);
	background: var(--wsscd-color-surface);
	border-radius: var(--wsscd-radius-md);
}

.wsscd-catalog-snapshot__empty > .wsscd-icon {
	flex-shrink: 0;
	color: var(--wsscd-text-muted);
	opacity: 0.6;
}

.wsscd-catalog-snapshot__empty-text {
	display: flex;
	flex-direction: column;
	gap: var(--wsscd-spacing-xxs);
}

.wsscd-catalog-snapshot__empty-text strong {
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
}

.wsscd-catalog-snapshot__empty-text span {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text-muted);
}

/* ─── KPI Strip — 3-cell stat strip with colored dots ──────── */

.wsscd-catalog-snapshot__kpi-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.wsscd-catalog-snapshot__kpi {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wsscd-spacing-sm);
	padding: var(--wsscd-spacing-lg) var(--wsscd-spacing-base);
	text-align: center;
	position: relative;
}

.wsscd-catalog-snapshot__kpi + .wsscd-catalog-snapshot__kpi::before {
	content: '';
	position: absolute;
	left: 0;
	top: 20%;
	bottom: 20%;
	width: var(--wsscd-border-width);
	background: var(--wsscd-color-border-light);
}

.wsscd-catalog-snapshot__kpi-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--wsscd-radius-full);
}

.wsscd-catalog-snapshot__kpi-dot--success { background: var(--wsscd-color-success); }
.wsscd-catalog-snapshot__kpi-dot--info    { background: var(--wsscd-color-primary); }
.wsscd-catalog-snapshot__kpi-dot--warn    { background: var(--wsscd-color-warning); }

.wsscd-catalog-snapshot__kpi-value {
	font-size: var(--wsscd-font-size-xxxl);
	font-weight: var(--wsscd-font-weight-bold);
	line-height: 1;
	color: var(--wsscd-color-text);
}

.wsscd-catalog-snapshot__kpi-value em {
	font-style: normal;
	font-size: var(--wsscd-font-size-large);
	font-weight: var(--wsscd-font-weight-regular, 400);
	color: var(--wsscd-text-muted);
}

.wsscd-catalog-snapshot__kpi-label {
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wsscd-text-muted);
}

/* ─── Summary bar ──────────────────────────────────────────── */

.wsscd-catalog-snapshot__summary-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wsscd-spacing-md) var(--wsscd-spacing-base);
	border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
}

.wsscd-catalog-snapshot__section-label {
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wsscd-text-muted);
}

.wsscd-catalog-snapshot__summary-meta {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text-muted);
}

/* ─── Accordion — per-category group with coverage bar ─────── */

.wsscd-catalog-snapshot__accordion {
	border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
}

.wsscd-catalog-snapshot__group {
	border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
}

.wsscd-catalog-snapshot__group:last-child {
	border-bottom: none;
}

/* Summary row uses a 2x grid: chevron | name+meta | (bar spans row 2) */
.wsscd-catalog-snapshot__group > summary {
	list-style: none;
	cursor: pointer;
	padding: var(--wsscd-spacing-md) var(--wsscd-spacing-base);
	display: grid;
	grid-template-columns: 16px 1fr auto;
	grid-template-rows: auto auto;
	column-gap: var(--wsscd-spacing-sm);
	row-gap: 6px;
	align-items: center;
	background: var(--wsscd-color-background);
	transition: background var(--wsscd-transition-fast) ease;
}

.wsscd-catalog-snapshot__group > summary::-webkit-details-marker,
.wsscd-catalog-snapshot__group > summary::marker {
	display: none;
	content: '';
}

.wsscd-catalog-snapshot__group > summary:hover {
	background: var(--wsscd-color-surface);
}

.wsscd-catalog-snapshot__group[open] > summary {
	background: var(--wsscd-color-surface);
}

/* Chevron - rotates 135deg (down-facing arrow) when open */
.wsscd-catalog-snapshot__chev {
	width: 8px;
	height: 8px;
	margin-top: 4px;
	border-right: var(--wsscd-border-width-thick) solid var(--wsscd-text-muted);
	border-top: var(--wsscd-border-width-thick) solid var(--wsscd-text-muted);
	transform: rotate(45deg);
	transition: transform var(--wsscd-transition-base) ease;
	align-self: start;
	justify-self: center;
}

.wsscd-catalog-snapshot__group[open] .wsscd-catalog-snapshot__chev {
	transform: rotate(135deg);
}

.wsscd-catalog-snapshot__group-name {
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
}

.wsscd-catalog-snapshot__group-meta {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text-muted);
	font-variant-numeric: tabular-nums;
}

.wsscd-catalog-snapshot__group-meta strong {
	color: var(--wsscd-color-text);
	font-weight: var(--wsscd-font-weight-bold);
}

/* Coverage bar spans cols 2-3 on row 2 */
.wsscd-catalog-snapshot__group-bar {
	grid-column: 2 / -1;
	height: 4px;
	border-radius: var(--wsscd-radius-pill);
	background: var(--wsscd-color-surface-alt);
	overflow: hidden;
}

.wsscd-catalog-snapshot__group-bar-fill {
	display: block;
	height: 100%;
	width: var(--wsscd-cat-pct, 0%);
	border-radius: var(--wsscd-radius-pill);
	transition: width var(--wsscd-transition-base) ease;
}

/* Tone palette - rotated across groups for visual distinction */
.wsscd-catalog-snapshot__group--tone-1 .wsscd-catalog-snapshot__group-bar-fill { background: var(--wsscd-color-primary); }
.wsscd-catalog-snapshot__group--tone-2 .wsscd-catalog-snapshot__group-bar-fill { background: var(--wsscd-color-success); }
.wsscd-catalog-snapshot__group--tone-3 .wsscd-catalog-snapshot__group-bar-fill { background: var(--wsscd-color-warning); }

/* Group body - 2-col grid of product mini-cards */
.wsscd-catalog-snapshot__group-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wsscd-spacing-xs) var(--wsscd-spacing-md);
	padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-base) var(--wsscd-spacing-md) calc(var(--wsscd-spacing-base) + 24px);
	background: var(--wsscd-color-surface);
}

.wsscd-catalog-snapshot__product {
	display: flex;
	align-items: center;
	padding: 6px var(--wsscd-spacing-sm);
	background: var(--wsscd-color-background);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	border-radius: var(--wsscd-radius-sm);
	color: var(--wsscd-color-text);
	text-decoration: none;
	transition: border-color var(--wsscd-transition-fast) ease,
	            background var(--wsscd-transition-fast) ease,
	            color var(--wsscd-transition-fast) ease;
}

a.wsscd-catalog-snapshot__product:hover {
	border-color: var(--wsscd-color-primary);
	color: var(--wsscd-color-primary);
	background: var(--wsscd-color-background);
}

a.wsscd-catalog-snapshot__product:focus-visible {
	outline: var(--wsscd-border-width-focus) solid var(--wsscd-color-primary);
	outline-offset: 1px;
}

.wsscd-catalog-snapshot__product-name {
	font-size: var(--wsscd-font-size-small);
	color: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wsscd-catalog-snapshot__overflow {
	margin: 0;
	padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-base);
	font-size: var(--wsscd-font-size-small);
	font-style: italic;
	color: var(--wsscd-text-muted);
	border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	background: var(--wsscd-color-surface);
}

/* ─── Responsive ───────────────────────────────────────────── */

@media (max-width: 640px) {
	.wsscd-catalog-snapshot__group-body {
		grid-template-columns: 1fr;
		padding-left: calc(var(--wsscd-spacing-base) + 16px);
	}
}

/* ═══════════════════════════════════════════════════════════════
   Workspace Grid — 3-Column Equal Height
   ═══════════════════════════════════════════════════════════════ */

.wsscd-workspace-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wsscd-spacing-sm-large, 10px);
	align-items: stretch;
}

.wsscd-workspace-grid > .wsscd-card {
	display: flex;
	flex-direction: column;
}

/* Card headers use base flat white from shared/_components.css */

.wsscd-workspace-grid > .wsscd-card > .wsscd-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.wsscd-workspace-header__right {
	display: flex;
	align-items: center;
	gap: var(--wsscd-space-2);
}

/* Card link (header "View All →") */

.wsscd-card-link {
	color: var(--wsscd-color-primary);
	padding: var(--wsscd-spacing-xs) var(--wsscd-space-3);
	border-radius: var(--wsscd-radius-sm);
	background: var(--wsscd-color-primary-alpha-10);
	border: 1px solid var(--wsscd-color-primary-alpha-10);
	transition: background 0.15s;
}

.wsscd-card-link:hover {
	background: var(--wsscd-color-primary-alpha-15);
	color: var(--wsscd-color-primary);
	text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   Dashboard Campaigns Strip (list + empty + overflow)
   All colors/spacing flow through design tokens (no hex fallbacks).
   ═══════════════════════════════════════════════════════════════ */

.wsscd-campaign-list {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wsscd-campaign-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-md);
	padding: var(--wsscd-spacing-md) var(--wsscd-spacing-lg);
	border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	transition: background var(--wsscd-transition-fast) ease;
}

.wsscd-campaign-row:last-child {
	border-bottom: none;
}

.wsscd-campaign-row:hover {
	background: var(--wsscd-color-surface);
}

/* Attention accent - left edge bar colored by verdict urgency.
   Makes rows needing attention scannable without reading the verdict chip. */
.wsscd-campaign-row--attention::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--wsscd-color-warning);
}

.wsscd-campaign-row--blocked::before,
.wsscd-campaign-row--risk::before {
	background: var(--wsscd-color-danger);
}

.wsscd-campaign-row__info {
	flex: 1;
	min-width: 0;
}

.wsscd-campaign-row__name {
	display: block;
	font-weight: var(--wsscd-font-weight-semibold);
	font-size: var(--wsscd-font-size-medium);
	line-height: 1.3;
	color: var(--wsscd-color-primary);
	text-decoration: none;
}

.wsscd-campaign-row__name:hover {
	text-decoration: underline;
}

.wsscd-campaign-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
	margin-top: var(--wsscd-spacing-xxs);
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text-muted);
}

/* Overflow footer */
.wsscd-campaign-overflow {
	padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-lg);
	text-align: center;
	background: var(--wsscd-color-surface);
	border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-text-muted);
}

.wsscd-campaign-overflow a {
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-primary);
	text-decoration: none;
}

.wsscd-campaign-overflow a:hover {
	text-decoration: underline;
}

/* Empty state */
.wsscd-campaign-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wsscd-spacing-md);
	padding: var(--wsscd-spacing-xxl) var(--wsscd-spacing-lg);
	text-align: center;
}

.wsscd-campaign-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--wsscd-radius-full);
	background: var(--wsscd-color-surface);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	color: var(--wsscd-text-muted);
}

.wsscd-campaign-empty__title {
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
}

.wsscd-campaign-empty__desc {
	max-width: 320px;
	font-size: var(--wsscd-font-size-base);
	line-height: var(--wsscd-line-height-relaxed);
	color: var(--wsscd-text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   Upcoming Opportunities — Hero + Weekly Split
   ═══════════════════════════════════════════════════════════════ */

/* ── Section wrapper (semantic hook) ────────────────────────── */

.wsscd-opp-section {
	overflow: hidden;
}

.wsscd-opp-header__badges {
	display: flex;
	gap: var(--wsscd-spacing-sm);
}

/* ── Grid layout: hero + dual panels ───────────────────────── */

.wsscd-opp-grid {
	display: grid;
}

.wsscd-opp-grid--3 {
	grid-template-columns: 1.2fr 1fr 1fr;
}

.wsscd-opp-grid--2 {
	grid-template-columns: 1.2fr 1fr;
}

.wsscd-opp-grid--panels-only {
	grid-template-columns: 1fr 1fr;
}

/* ── Major Event Hero ──────────────────────────────────────── */

.wsscd-opp-hero {
	padding: var(--wsscd-space-lg);
	border-right: 1px solid var(--wsscd-border, #dcdcde);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.wsscd-opp-hero__content {
	flex: 1;
}

.wsscd-opp-hero--urgent {
	background:
		radial-gradient(ellipse at 10% 20%, var(--wsscd-color-danger-alpha-15, rgba(214, 54, 56, 0.07)) 0%, transparent 55%),
		linear-gradient(180deg, rgba(214, 54, 56, 0.02) 0%, transparent 40%);
}

.wsscd-opp-hero--soon {
	background:
		radial-gradient(ellipse at 10% 20%, var(--wsscd-color-warning-alpha-15, rgba(219, 166, 23, 0.07)) 0%, transparent 55%),
		linear-gradient(180deg, rgba(219, 166, 23, 0.02) 0%, transparent 40%);
}

.wsscd-opp-hero--future {
	background:
		radial-gradient(ellipse at 10% 20%, var(--wsscd-color-primary-alpha-15, color-mix(in srgb, var(--wsscd-color-primary) 7%, transparent)) 0%, transparent 55%),
		linear-gradient(180deg, color-mix(in srgb, var(--wsscd-color-primary) 2%, transparent) 0%, transparent 40%);
}

.wsscd-opp-hero--past {
	opacity: 0.7;
}

/* Badge (label above countdown) */

.wsscd-opp-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-space-2);
	width: fit-content;
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	padding: var(--wsscd-spacing-xs) var(--wsscd-space-3) var(--wsscd-spacing-xs) var(--wsscd-spacing-sm);
	border-radius: var(--wsscd-radius-sm);
	margin-bottom: var(--wsscd-space-2);
}

.wsscd-opp-hero__badge--urgent {
	color: var(--wsscd-color-danger-dark, #a02222);
	background: rgba(214, 54, 56, 0.05);
	border: 1px solid rgba(214, 54, 56, 0.1);
}

.wsscd-opp-hero__badge--soon {
	color: var(--wsscd-color-warning-dark, #b19313);
	background: rgba(219, 166, 23, 0.05);
	border: 1px solid rgba(219, 166, 23, 0.1);
}

.wsscd-opp-hero__badge--future {
	color: var(--wsscd-color-primary);
	background: var(--wsscd-color-primary-alpha-5);
	border: 1px solid var(--wsscd-color-primary-alpha-10);
}

.wsscd-opp-hero__badge--past {
	color: var(--wsscd-text-muted);
	background: var(--wsscd-color-surface-dark, #f0f0f1);
	border: 1px solid var(--wsscd-color-border, #dcdcde);
}

/* Pulsing dot */

.wsscd-opp-hero__badge-dot {
	width: 8px;
	height: 8px;
}

.wsscd-opp-hero__badge-dot--urgent {
	background: var(--wsscd-color-danger, #d63638);
	animation: wsscd-opp-ring-pulse 2s ease-out infinite;
}

.wsscd-opp-hero__badge-dot--soon {
	background: var(--wsscd-color-warning, #dba617);
	animation: wsscd-opp-ring-pulse-warn 2s ease-out infinite;
}

@keyframes wsscd-opp-ring-pulse {
	0% { box-shadow: 0 0 0 0 rgba(214, 54, 56, 0.35); }
	70% { box-shadow: 0 0 0 6px rgba(214, 54, 56, 0); }
	100% { box-shadow: 0 0 0 0 rgba(214, 54, 56, 0); }
}

@keyframes wsscd-opp-ring-pulse-warn {
	0% { box-shadow: 0 0 0 0 rgba(219, 166, 23, 0.35); }
	70% { box-shadow: 0 0 0 6px rgba(219, 166, 23, 0); }
	100% { box-shadow: 0 0 0 0 rgba(219, 166, 23, 0); }
}

/* Countdown */

.wsscd-opp-hero__countdown {
	display: flex;
	align-items: baseline;
	gap: var(--wsscd-space-2);
	margin-bottom: var(--wsscd-space-2);
}

.wsscd-opp-hero__num {
	font-size: var(--wsscd-font-size-display-lg);
	font-weight: 800;
	line-height: 0.85;
	letter-spacing: -2px;
}

.wsscd-opp-hero__num--urgent {
	color: var(--wsscd-color-danger, #d63638);
}

.wsscd-opp-hero__num--soon {
	color: var(--wsscd-color-warning-dark, #b19313);
}

.wsscd-opp-hero__num--future {
	color: var(--wsscd-color-primary);
}

.wsscd-opp-hero__num--past {
	color: var(--wsscd-text-muted);
}

.wsscd-opp-hero__unit-block {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.wsscd-opp-hero__unit-top {
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-bold);
	line-height: var(--wsscd-line-height-tight);
}

.wsscd-opp-hero--urgent .wsscd-opp-hero__unit-top {
	color: var(--wsscd-color-danger-dark, #a02222);
}

.wsscd-opp-hero--soon .wsscd-opp-hero__unit-top {
	color: var(--wsscd-color-warning-dark, #b19313);
}

.wsscd-opp-hero--future .wsscd-opp-hero__unit-top {
	color: var(--wsscd-color-primary-dark);
}

.wsscd-opp-hero--past .wsscd-opp-hero__unit-top {
	color: var(--wsscd-text-muted);
}

.wsscd-opp-hero__unit-bottom {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-text-muted);
	font-weight: var(--wsscd-font-weight-medium);
}

/* Decorative divider */

.wsscd-opp-hero__divider {
	width: 36px;
	height: 2px;
	border-radius: var(--wsscd-radius-xs);
	margin-bottom: var(--wsscd-space-2);
}

.wsscd-opp-hero--urgent .wsscd-opp-hero__divider {
	background: linear-gradient(90deg, var(--wsscd-color-danger, #d63638), rgba(214, 54, 56, 0.15));
}

.wsscd-opp-hero--soon .wsscd-opp-hero__divider {
	background: linear-gradient(90deg, var(--wsscd-color-warning, #dba617), rgba(219, 166, 23, 0.15));
}

.wsscd-opp-hero--future .wsscd-opp-hero__divider {
	background: linear-gradient(90deg, var(--wsscd-color-primary), var(--wsscd-color-primary-alpha-15));
}

.wsscd-opp-hero--past .wsscd-opp-hero__divider {
	background: linear-gradient(90deg, var(--wsscd-text-muted), rgba(100, 105, 112, 0.15));
}

/* Name + Date */

.wsscd-opp-hero__name {
	font-size: var(--wsscd-font-size-xl);
	font-weight: var(--wsscd-font-weight-bold);
	line-height: var(--wsscd-line-height-tight);
	color: var(--wsscd-text, #1d2327);
	margin-bottom: var(--wsscd-spacing-xxs);
	letter-spacing: -0.2px;
}

.wsscd-opp-hero__date {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text-muted);
	margin-bottom: var(--wsscd-spacing-sm);
}

.wsscd-opp-hero__summary {
	margin: 0 0 var(--wsscd-spacing-xs);
	font-size: var(--wsscd-font-size-medium);
	line-height: var(--wsscd-line-height-base);
	color: var(--wsscd-text, #1d2327);
}

.wsscd-opp-hero__meta {
	margin: 0 0 var(--wsscd-spacing-sm);
	font-size: var(--wsscd-font-size-base);
	line-height: var(--wsscd-line-height-base);
	color: var(--wsscd-text-muted);
}

/* Tags */

.wsscd-opp-hero__tags {
	display: flex;
	gap: var(--wsscd-space-2);
	flex-wrap: wrap;
}

/* CTA */

.wsscd-opp-hero__actions {
	margin-top: var(--wsscd-space-3);
}

.wsscd-opp-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
	padding: var(--wsscd-spacing-sm) var(--wsscd-space-lg);
	border-radius: var(--wsscd-radius-sm);
	font-family: inherit;
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-semibold);
	text-decoration: none;
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--wsscd-color-primary) 0%, var(--wsscd-color-primary-dark) 100%);
	color: var(--wsscd-color-white, #fff);
	box-shadow: 0 2px 8px var(--wsscd-color-primary-alpha-25);
	transition: box-shadow 0.15s, transform 0.1s;
}

.wsscd-opp-hero__cta:hover {
	box-shadow: 0 4px 14px color-mix(in srgb, var(--wsscd-color-primary) 35%, transparent);
	transform: translateY(-1px);
	color: var(--wsscd-color-white, #fff);
}

/* ── Opportunity Panel (store insight / weekly) ────────────── */

.wsscd-opp-panel {
	padding: var(--wsscd-space-lg);
	border-right: 1px solid var(--wsscd-border, #dcdcde);
	display: flex;
	flex-direction: column;
	gap: var(--wsscd-spacing-xs);
	transition: background 0.15s;
}

.wsscd-opp-panel:last-child {
	border-right: none;
}

.wsscd-opp-panel:hover {
	background: var(--wsscd-surface-muted, #f6f7f7);
}

.wsscd-opp-panel--store {
	background: linear-gradient(180deg, rgba(0, 163, 42, 0.02) 0%, transparent 40%);
}

.wsscd-opp-panel--store:hover {
	background: linear-gradient(180deg, rgba(0, 163, 42, 0.04) 0%, var(--wsscd-surface-muted, #f6f7f7) 60%);
}

/* Panel badge (matches hero badge pattern) */

.wsscd-opp-panel__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
	width: fit-content;
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	padding: var(--wsscd-spacing-xs) var(--wsscd-space-3) var(--wsscd-spacing-xs) var(--wsscd-spacing-sm);
	border-radius: var(--wsscd-radius-sm);
	margin-bottom: var(--wsscd-spacing-xs);
}

.wsscd-opp-panel__badge--store {
	color: var(--wsscd-color-success-dark, #047857);
	background: rgba(0, 163, 42, 0.05);
	border: 1px solid rgba(0, 163, 42, 0.1);
}

.wsscd-opp-panel__badge--weekly {
	color: var(--wsscd-color-primary);
	background: var(--wsscd-color-primary-alpha-5);
	border: 1px solid var(--wsscd-color-primary-alpha-10);
}

.wsscd-opp-panel__badge-dot {
	width: 6px;
	height: 6px;
}

.wsscd-opp-panel__badge-dot--store {
	background: var(--wsscd-color-success, #00a32a);
}

.wsscd-opp-panel__badge-dot--weekly {
	background: var(--wsscd-color-primary);
}

/* Panel metric (large stat number) */

.wsscd-opp-panel__metric {
	display: flex;
	align-items: baseline;
	gap: var(--wsscd-spacing-xs);
	margin-bottom: 0;
}

.wsscd-opp-panel__metric-num {
	font-size: var(--wsscd-font-size-xxxl);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -1.5px;
}

.wsscd-opp-panel__metric-num--store {
	color: var(--wsscd-color-success, #00a32a);
}

.wsscd-opp-panel__metric-num--weekly {
	color: var(--wsscd-color-primary);
}

.wsscd-opp-panel__metric-unit {
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wsscd-opp-panel__metric-unit--store {
	color: var(--wsscd-color-success-dark, #047857);
}

.wsscd-opp-panel__metric-unit--weekly {
	color: var(--wsscd-color-primary-dark);
}

.wsscd-opp-panel__name {
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-bold);
	color: var(--wsscd-text, #1d2327);
	letter-spacing: -0.1px;
}

.wsscd-opp-panel__desc {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text-muted);
	line-height: var(--wsscd-line-height-base);
	margin: 0;
	flex: 1;
}

.wsscd-opp-panel__meta {
	display: flex;
	gap: var(--wsscd-spacing-sm);
	flex-wrap: wrap;
}

.wsscd-opp-panel__secondary {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text-muted);
	margin: 0;
	line-height: var(--wsscd-line-height-base);
}

.wsscd-opp-panel__footer {
	margin-top: auto;
	padding-top: var(--wsscd-spacing-xs);
}

.wsscd-opp-panel__cta {
	gap: var(--wsscd-spacing-xs);
	color: var(--wsscd-color-primary);
	padding: var(--wsscd-spacing-sm) var(--wsscd-space-3);
	border-radius: var(--wsscd-radius-sm);
	background: var(--wsscd-color-primary-alpha-10);
	border: 1px solid var(--wsscd-color-primary-alpha-10);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--wsscd-color-primary) 6%, transparent);
	cursor: pointer;
	transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.wsscd-opp-panel__cta:hover {
	background: var(--wsscd-color-primary-alpha-15);
	box-shadow: 0 2px 6px color-mix(in srgb, var(--wsscd-color-primary) 12%, transparent);
	transform: translateY(-1px);
	color: var(--wsscd-color-primary);
}

/* ── Linked campaign dot (shared) ──────────────────────────── */

.wsscd-opp-linked__dot {
	width: 6px;
	height: 6px;
	background: var(--wsscd-text-muted);
}

.wsscd-opp-linked__dot--active {
	background: var(--wsscd-color-success, #00a32a);
}

.wsscd-opp-linked__dot--scheduled {
	background: var(--wsscd-color-primary);
}

.wsscd-opp-linked__dot--paused {
	background: var(--wsscd-color-warning-dark, #b19313);
}

.wsscd-opp-linked__dot--draft {
	background: var(--wsscd-color-warning, #dba617);
}

.wsscd-opp-linked__dot--expired {
	background: var(--wsscd-text-muted);
}

/* ── Empty states ──────────────────────────────────────────── */

.wsscd-opp-empty {
	display: flex;
	align-items: center;
	gap: var(--wsscd-space-3);
	padding: var(--wsscd-space-4);
	background: var(--wsscd-surface-muted, #f6f7f7);
	border-radius: var(--wsscd-radius-sm);
}

.wsscd-opp-empty > .wsscd-icon {
	width: 20px;
	height: 20px;
	opacity: 0.4;
	flex-shrink: 0;
}

.wsscd-opp-empty__text strong {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text);
}

.wsscd-opp-empty__text span {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text-muted);
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 1100px) {
	/* 3-column opportunities → hero full-width, panels side by side. */
	.wsscd-opp-grid--3 {
		grid-template-columns: 1fr 1fr;
	}

	.wsscd-opp-grid--3 .wsscd-opp-hero {
		grid-column: 1 / -1;
		border-right: none;
		border-bottom: 1px solid var(--wsscd-border, #dcdcde);
	}
}

@media (max-width: 900px) {
	.wsscd-opp-grid,
	.wsscd-opp-grid--3,
	.wsscd-opp-grid--2,
	.wsscd-opp-grid--panels-only {
		grid-template-columns: 1fr;
	}

	.wsscd-opp-hero {
		border-right: none;
		border-bottom: 1px solid var(--wsscd-border, #dcdcde);
		padding: var(--wsscd-space-5);
	}

		.wsscd-opp-hero__num {
			font-size: var(--wsscd-font-size-display-md);
	}

	.wsscd-opp-panel {
		border-right: none;
		border-bottom: 1px solid var(--wsscd-border, #dcdcde);
	}

	.wsscd-opp-panel:last-child {
		border-bottom: none;
	}

	.wsscd-workspace-grid {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════════
   Campaign Overview (3-column card)
   ═══════════════════════════════════════════════════════════════ */

.wsscd-ov-card .wsscd-card__body--flush {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wsscd-ov {
	padding: var(--wsscd-space-lg) var(--wsscd-space-5);
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Hero: large count + label */

.wsscd-ov__hero {
	display: flex;
	align-items: center;
	gap: var(--wsscd-space-4);
	margin-bottom: var(--wsscd-space-lg);
}

.wsscd-ov__count {
	font-size: var(--wsscd-font-size-display-md);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -2px;
	color: var(--wsscd-text, #1d2327);
}

.wsscd-ov__count--zero {
	color: var(--wsscd-color-text-muted, #a7aaad);
}

.wsscd-ov__count-label {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text-muted);
}

.wsscd-ov__empty-note {
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-text-muted);
	text-align: center;
	padding: 8px 0;
	margin: 0;
}

/* Proportional bar */

.wsscd-ov-bar {
	display: flex;
	height: 6px;
	border-radius: 3px;
	overflow: hidden;
	gap: 2px;
	margin-bottom: var(--wsscd-space-3);
	background: var(--wsscd-color-surface-dark, #f0f0f1);
}

.wsscd-ov-bar__seg {
	border-radius: 3px;
}

.wsscd-ov-bar__seg--active { background: var(--wsscd-color-success, #00a32a); }
.wsscd-ov-bar__seg--scheduled { background: var(--wsscd-color-primary); }
.wsscd-ov-bar__seg--paused { background: var(--wsscd-color-border, #c3c4c7); }
.wsscd-ov-bar__seg--draft { background: var(--wsscd-color-warning, #dba617); }
.wsscd-ov-bar__seg--expired { background: var(--wsscd-color-border-lighter, #dcdcde); }

/* Legend */

.wsscd-ov-legend {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wsscd-spacing-xs);
}

.wsscd-ov-legend__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-sm);
	font-size: var(--wsscd-font-size-base);
	border-radius: var(--wsscd-radius-md, 6px);
	background: var(--wsscd-color-surface, #f6f7f7);
}

.wsscd-ov-legend__left {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
	color: var(--wsscd-text-muted);
}

.wsscd-ov-legend__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

.wsscd-ov-legend__dot--active { background: var(--wsscd-color-success, #00a32a); }
.wsscd-ov-legend__dot--scheduled { background: var(--wsscd-color-primary); }
.wsscd-ov-legend__dot--paused { background: var(--wsscd-color-warning, #dba617); }
.wsscd-ov-legend__dot--draft { background: var(--wsscd-color-text-muted, #a7aaad); }
.wsscd-ov-legend__dot--expired { background: var(--wsscd-color-border-lighter, #dcdcde); }

.wsscd-ov-legend__item strong {
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-text, #1d2327);
}

/* Footer link */

.wsscd-ov-footer {
	margin-top: auto;
	padding-top: var(--wsscd-space-4);
	text-align: center;
}

.wsscd-ov-footer__link {
	font-size: var(--wsscd-font-size-base);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-primary);
	text-decoration: none;
}

.wsscd-ov-footer__link:hover {
	text-decoration: underline;
}