/**
 * Analytics Dashboard Styles
 *
 * Professional analytics dashboard with metrics cards, charts, and data tables.
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/admin/analytics.css
 * @since      1.0.0
 *
 * TABLE OF CONTENTS
 * =================
 * 2. DASHBOARD CONTAINER & LAYOUT
 * 3. FILTERS & CONTROLS
 * 4. METRICS GRID (accent-stripe cards with tone variants)
 * 5. CARD OVERRIDES (extends shared .wsscd-card)
 * 6. CHART COMPONENTS
 * 7. EMPTY STATES
 * 8. PERFORMANCE SUMMARY
 * 9. DATA TABLES
 * 10. ACTIVITY FEED
 * 11. FORM ELEMENTS
 * 12. RESPONSIVE DESIGN
 */

/* ==========================================================================
   1. LOCAL CUSTOM PROPERTIES
   ========================================================================== */

/* ==========================================================================
   2. DASHBOARD CONTAINER & LAYOUT
   ========================================================================== */

.wsscd-analytics-dashboard {
	/* Metric Card Theming — overridden by tone variants */
	--metric-accent-color: var(--wsscd-color-primary);
	--metric-value-color: var(--wsscd-color-primary);

	position: relative;
	max-width: var(--wsscd-container-xl);
	min-height: 80vh;
	font-size: var(--wsscd-font-size-base) !important;
	line-height: var(--wsscd-line-height-base) !important;
}

/* Section rhythm */
.wsscd-analytics-section {
	margin-bottom: var(--wsscd-spacing-lg);
}

/* ── Toolbar ───────────────────────────────────────────────── */

.wsscd-analytics-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wsscd-spacing-base);
	margin-bottom: var(--wsscd-spacing-lg);
	padding: 10px 16px;
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-lg);
	box-shadow: 0 1px 2px rgba(var(--wsscd-shadow-color-neutral), 0.04);
}

.wsscd-analytics-toolbar__left,
.wsscd-analytics-toolbar__right {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
	flex-wrap: wrap;
}

.wsscd-analytics-toolbar__separator {
	width: 1px;
	height: 20px;
	background: var(--wsscd-color-border-lighter);
	flex-shrink: 0;
}

/* ── Grid Layouts ──────────────────────────────────────────── */

.wsscd-analytics-grid {
	display: grid;
	/* Matches the page-level 10px rhythm. */
	gap: var(--wsscd-spacing-sm-large);
}

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

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

/* Bento Grid: Products (top-left) + Campaigns (bottom-left) + Activity sidebar (right) */
.wsscd-analytics-bento {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: auto auto;
	/* Matches the page-level 10px rhythm. */
	gap: var(--wsscd-spacing-sm-large, 10px);
}

.wsscd-bento-products {
	grid-column: 1;
	grid-row: 1;
}

.wsscd-bento-campaigns {
	grid-column: 1;
	grid-row: 2;
}

.wsscd-bento-activity {
	grid-column: 2;
	grid-row: 1 / 3;
	display: flex;
	flex-direction: column;
}

.wsscd-bento-activity .wsscd-card__body {
	flex: 1;
	overflow: hidden;
}

.wsscd-bento-activity .wsscd-activity-feed {
	max-height: none;
	height: 100%;
	overflow-y: auto;
}

/* ── Status Bar ────────────────────────────────────────────── */

.wsscd-analytics-status-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wsscd-spacing-lg);
	padding: 8px 16px;
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border-lighter, #dcdcde);
	border-radius: var(--wsscd-radius-md, 8px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted);
}

.wsscd-last-updated {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-xs);
}

.wsscd-auto-refresh label {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted);
}

.wsscd-auto-refresh label:hover {
	color: var(--wsscd-color-text);
}

/* ==========================================================================
   3. FILTERS & CONTROLS
   ========================================================================== */

/* ---------------------------------------------------------------------------
   3.1 Campaign Filter
   --------------------------------------------------------------------------- */

.wsscd-campaign-filter {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
}

.wsscd-filter-label {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-gap-tight);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-medium);
	color: var(--wsscd-color-text-lighter);
	white-space: nowrap;
}

.wsscd-filter-label .wsscd-icon {
	width: var(--wsscd-icon-small);
	height: var(--wsscd-icon-small);
	color: var(--wsscd-color-primary);
	fill: var(--wsscd-color-primary);
}

.wsscd-campaign-select {
	min-width: 220px;
	max-width: 300px;
	height: var(--wsscd-button-height);
	padding: var(--wsscd-spacing-xs) var(--wsscd-padding-compact);
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-dark);
	border-radius: var(--wsscd-radius-md);
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text);
	cursor: pointer;
	transition: var(--wsscd-transition-all);
}

.wsscd-campaign-select:hover {
	border-color: var(--wsscd-color-primary);
}

.wsscd-campaign-select:focus {
	border-color: var(--wsscd-color-primary);
	outline: var(--wsscd-border-width-focus) solid var(--wsscd-color-primary);
	outline-offset: 0;
	box-shadow: var(--wsscd-ring-focus);
}

.wsscd-campaign-select optgroup {
	padding-top: var(--wsscd-spacing-sm);
	font-weight: var(--wsscd-font-weight-semibold);
	font-style: normal;
	color: var(--wsscd-color-text);
}

.wsscd-campaign-select option {
	padding: var(--wsscd-spacing-xs);
	font-weight: var(--wsscd-font-weight-normal);
}

/* ---------------------------------------------------------------------------
   3.2 Date Range Selector
   --------------------------------------------------------------------------- */

.wsscd-date-range-selector {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wsscd-spacing-sm);
}

.wsscd-quick-date-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wsscd-gap-tight);
}

.wsscd-quick-date-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-gap-tight);
	padding: var(--wsscd-padding-small) var(--wsscd-spacing-base);
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-sm);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-medium);
	line-height: 1.4;
	color: var(--wsscd-color-text-lighter);
	white-space: nowrap;
	cursor: pointer;
	transition: var(--wsscd-transition-all);
}

.wsscd-quick-date-btn:hover {
	background: var(--wsscd-color-surface);
	border-color: var(--wsscd-color-border-dark);
	color: var(--wsscd-color-text);
	transform: var(--wsscd-transform-lift-subtle);
	box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-quick-date-btn:active {
	transform: none;
	box-shadow: none;
}

.wsscd-quick-date-btn:focus {
	border-color: var(--wsscd-color-primary);
	outline: var(--wsscd-border-width-focus) solid var(--wsscd-color-primary);
	outline-offset: var(--wsscd-spacing-xxs);
}

.wsscd-quick-date-btn[aria-pressed="true"] {
	background: var(--wsscd-color-primary);
	border-color: var(--wsscd-color-primary);
	color: var(--wsscd-color-white);
	box-shadow: var(--wsscd-shadow-primary);
}

.wsscd-quick-date-btn[aria-pressed="true"]:hover {
	background: var(--wsscd-color-primary-dark);
	border-color: var(--wsscd-color-primary-dark);
}

.wsscd-quick-date-btn .wsscd-icon {
	width: var(--wsscd-icon-small);
	height: var(--wsscd-icon-small);
}

/* Custom Date Range */
.wsscd-custom-date-range {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
}

.wsscd-date-range-select,
.wsscd-date-input {
	height: var(--wsscd-button-height);
	padding: 0 var(--wsscd-spacing-sm);
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-dark);
	border-radius: var(--wsscd-radius-custom);
	font-size: var(--wsscd-font-size-base);
	box-shadow: var(--wsscd-shadow-sm);
	transition: var(--wsscd-transition-all);
}

.wsscd-date-range-select {
	min-width: 180px;
}

.wsscd-date-range-select:hover,
.wsscd-date-input:hover {
	border-color: var(--wsscd-color-primary);
}

.wsscd-date-range-select:focus,
.wsscd-date-input:focus {
	border-color: var(--wsscd-color-primary);
	outline: none;
	box-shadow: var(--wsscd-ring-focus), var(--wsscd-shadow-md);
}

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

/* Export Dropdown */
.wsscd-export-dropdown {
	position: relative;
}

.wsscd-export-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: var(--wsscd-z-dropdown);
	min-width: 150px;
	margin-top: var(--wsscd-spacing-sm);
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	border-radius: var(--wsscd-radius-lg);
	box-shadow: var(--wsscd-shadow-md);
	overflow: hidden;
}

.wsscd-export-link {
	display: block;
	padding: var(--wsscd-spacing-sm);
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-color-primary);
	text-decoration: none;
	transition: var(--wsscd-transition-fast);
}

.wsscd-export-link:hover {
	padding-left: var(--wsscd-spacing-md);
	background: var(--wsscd-color-surface);
	color: var(--wsscd-color-primary-dark);
}

/* ==========================================================================
   4. METRICS GRID
   ========================================================================== */

/* ---------------------------------------------------------------------------
   4.1 Grid Layout
   --------------------------------------------------------------------------- */

/* KPI Metrics — Hero Metric + Supporting 2x2 Grid */
.wsscd-analytics-dashboard .wsscd-metrics-row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 16px;
	align-items: stretch;
}

/* Hero card (Incremental Revenue — first direct child) */
.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px 24px;
	background: linear-gradient(135deg, var(--wsscd-color-primary) 0%, var(--wsscd-color-primary-dark) 100%);
	border: none;
	border-radius: 14px;
	color: #fff;
	box-shadow: 0 2px 8px var(--wsscd-color-primary-alpha-25);
	overflow: hidden;
	position: relative;
}

.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card::before {
	display: none;
}

.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card:hover {
	box-shadow: 0 4px 14px color-mix(in srgb, var(--wsscd-color-primary) 35%, transparent);
}

.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card .wsscd-metric-card__label {
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 8px;
}

.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card .wsscd-metric-card__value {
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -2px;
	color: #fff;
}

.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card .wsscd-metric-card__value-row {
	margin-bottom: 8px;
}

.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card .wsscd-metric-card__detail {
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--wsscd-font-size-small);
}

.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card .wsscd-metric-card__change {
	color: rgba(255, 255, 255, 0.9);
}

.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card .wsscd-field-helper .wsscd-icon,
.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card .wsscd-tooltip-trigger .wsscd-icon {
	color: rgba(255, 255, 255, 0.5);
	fill: rgba(255, 255, 255, 0.5);
}

.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card .wsscd-field-helper:hover .wsscd-icon,
.wsscd-analytics-dashboard .wsscd-metrics-row > .wsscd-metric-card .wsscd-tooltip-trigger:hover .wsscd-icon {
	color: rgba(255, 255, 255, 0.9);
	fill: rgba(255, 255, 255, 0.9);
}

/* Supporting 2x2 grid */
.wsscd-metrics-supporting {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.wsscd-metrics-supporting .wsscd-metric-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
	background: var(--wsscd-color-white, #fff);
	border: 1px solid var(--wsscd-color-border-lighter, #dcdcde);
	border-radius: 12px;
	box-shadow: none;
	overflow: hidden;
}

.wsscd-metrics-supporting .wsscd-metric-card::before {
	display: none;
}

.wsscd-metrics-supporting .wsscd-metric-card:hover {
	border-color: var(--wsscd-color-border-lighter, #dcdcde);
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
   4.3 Label, Value Row & Detail
   --------------------------------------------------------------------------- */

.wsscd-analytics-dashboard .wsscd-metric-card__label {
	font-size: var(--wsscd-font-size-small);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wsscd-color-text-muted, #646970);
	margin-bottom: 6px;
}

.wsscd-analytics-dashboard .wsscd-metric-card__value-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 6px;
}

.wsscd-analytics-dashboard .wsscd-metric-card__value {
	font-size: var(--wsscd-font-size-xxl);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.5px;
	color: var(--wsscd-color-text, #1d2327);
}

.wsscd-analytics-dashboard .wsscd-metric-card__detail {
	font-size: var(--wsscd-font-size-small);
	line-height: 1.4;
	color: var(--wsscd-color-text-muted, #646970);
}

/* ---------------------------------------------------------------------------
   4.4 Change Indicators
   --------------------------------------------------------------------------- */

.wsscd-analytics-dashboard .wsscd-metric-card__change {
	font-size: var(--wsscd-font-size-small);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.wsscd-analytics-dashboard .wsscd-metric-card__change--success {
	color: var(--wsscd-color-success, #00a32a);
}

.wsscd-analytics-dashboard .wsscd-metric-card__change--danger {
	color: var(--wsscd-color-danger, #d63638);
}

.wsscd-analytics-dashboard .wsscd-metric-card__change--neutral {
	color: var(--wsscd-color-text-muted, #646970);
}

/* ---------------------------------------------------------------------------
   4.5 Tone Variants — supporting cards use neutral values
   --------------------------------------------------------------------------- */

.wsscd-analytics-dashboard .wsscd-metric-card--success,
.wsscd-analytics-dashboard .wsscd-metric-card--primary,
.wsscd-analytics-dashboard .wsscd-metric-card--pro,
.wsscd-analytics-dashboard .wsscd-metric-card--warning,
.wsscd-analytics-dashboard .wsscd-metric-card--danger {
	--metric-accent-color: transparent;
	--metric-value-color: var(--wsscd-color-text-muted, #646970);
}

.wsscd-metrics-supporting .wsscd-metric-card__value {
	color: var(--wsscd-color-text-muted, #646970);
}

/* ==========================================================================
   5. CHART COMPONENTS
   ========================================================================== */

/* Analytics card overrides — uses shared .wsscd-card__header base.
   Only adds card-level clipping and analytics-specific elements. */

.wsscd-analytics-dashboard .wsscd-card {
	overflow: hidden;
	margin-bottom: 0;
	background: var(--wsscd-color-white);
	border-color: var(--wsscd-color-border-lighter, #dcdcde);
}

.wsscd-analytics-dashboard .wsscd-card:hover {
	border-color: var(--wsscd-color-border-lighter, #dcdcde);
	box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-analytics-dashboard .wsscd-card__body {
	padding: 18px;
}

.wsscd-analytics-dashboard .wsscd-card__body--flush {
	padding: 0;
}

.wsscd-analytics-dashboard .wsscd-card__note {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-lighter);
}

.wsscd-analytics-dashboard .wsscd-card__link {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-primary);
	text-decoration: none;
	font-weight: 500;
}

.wsscd-analytics-dashboard .wsscd-card__link:hover {
	text-decoration: underline;
}

/* Chart body flush — remove padding when chart fills the card. */

.wsscd-analytics-dashboard .wsscd-card__body:has(.wsscd-chart-container) {
	padding: 0;
}

/* Chart Container */
.wsscd-chart-container {
	position: relative;
	margin: 0;
	padding: var(--wsscd-spacing-base);
	background: var(--wsscd-color-white);
	overflow: visible;
}

.wsscd-chart-wrapper {
	height: 100%;
}

.wsscd-chart-container canvas {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Chart state overlays — fill the container height */

.wsscd-chart-loading,
.wsscd-chart-empty,
.wsscd-chart-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: 200px;
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-base);
}

.wsscd-chart-empty__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--wsscd-color-surface-dark, #f0f0f1);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
}

.wsscd-chart-empty__icon .wsscd-icon {
	width: 24px;
	height: 24px;
	color: var(--wsscd-color-text-muted, #646970);
}

.wsscd-chart-empty__title {
	font-size: var(--wsscd-font-size-medium);
	font-weight: 600;
	color: var(--wsscd-color-text, #1d2327);
}

.wsscd-chart-empty__text {
	font-size: var(--wsscd-font-size-small);
	max-width: 280px;
	text-align: center;
	line-height: 1.5;
	color: var(--wsscd-color-text-muted, #646970);
}

.wsscd-chart-error .wsscd-icon {
	color: var(--wsscd-color-danger, #d63638);
}

/* Chart Tooltip */
.chartjs-tooltip {
	padding: var(--wsscd-padding-small) var(--wsscd-spacing-md);
	background: rgba(0, 0, 0, 0.8);
	border-radius: var(--wsscd-radius-md);
	font-size: var(--wsscd-font-size-small);
	color: white;
	box-shadow: var(--wsscd-shadow-lg);
	pointer-events: none;
}

/* Chart Selectors */
.wsscd-chart-type-selector {
	height: var(--wsscd-button-height-large);
	padding: 0 var(--wsscd-spacing-md);
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-dark);
	border-radius: var(--wsscd-radius-md);
	font-size: var(--wsscd-font-size-base);
	transition: border-color var(--wsscd-transition-base);
}

.wsscd-chart-type-selector:hover {
	border-color: var(--wsscd-color-primary);
}

.wsscd-chart-type-selector:focus {
	border-color: var(--wsscd-color-primary);
	outline: none;
	box-shadow: var(--wsscd-ring-focus);
}

/* ---------------------------------------------------------------------------
   Store Performance — Compact Inline Strip
   --------------------------------------------------------------------------- */

.wsscd-store-perf-strip {
	background: var(--wsscd-color-white, #fff);
	border: 1px solid var(--wsscd-color-border-lighter, #dcdcde);
	border-radius: 14px;
	overflow: hidden;
}

.wsscd-store-perf-strip__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid var(--wsscd-color-border-lighter, #dcdcde);
}

.wsscd-store-perf-strip__heading {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wsscd-font-size-base);
	font-weight: 600;
	color: var(--wsscd-color-text, #1d2327);
}

.wsscd-store-perf-strip__heading .wsscd-icon {
	color: var(--wsscd-color-text-muted, #646970);
}

.wsscd-store-perf-strip__note {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted, #646970);
}

.wsscd-store-perf-strip__items {
	display: flex;
}

.wsscd-store-perf-strip__item {
	flex: 1;
	padding: 16px 18px;
	border-right: 1px solid var(--wsscd-color-border-lighter, #dcdcde);
	text-align: center;
}

.wsscd-store-perf-strip__item:last-child {
	border-right: none;
}

.wsscd-store-perf-strip__label {
	display: block;
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted, #646970);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	margin-bottom: 4px;
}

.wsscd-store-perf-strip__value {
	display: block;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	color: var(--wsscd-color-text-muted, #646970);
	margin-bottom: 2px;
}

.wsscd-store-perf-strip__desc {
	display: block;
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted, #646970);
}

@media ( max-width: 782px ) {
	.wsscd-store-perf-strip__items {
		flex-wrap: wrap;
	}

	.wsscd-store-perf-strip__item {
		flex: 1 1 calc( 50% - 1px );
		border-bottom: 1px solid var(--wsscd-color-border-lighter, #dcdcde);
	}

	.wsscd-store-perf-strip__item:nth-last-child(-n+2) {
		border-bottom: none;
	}

	.wsscd-store-perf-strip__item:nth-child(2n) {
		border-right: none;
	}
}

/* ── Intelligence Cards ─────────────────────────────────────── */

.wsscd-analytics-intel-card {
	display: flex;
	flex-direction: column;
}

/* Analytics intel card uses base .wsscd-card__header (no gradient) */


/* Performance table */
.wsscd-analytics-perf-table {
	width: 100%;
	border-collapse: collapse;
}

.wsscd-analytics-perf-table td {
	padding: 12px 18px;
	font-size: var(--wsscd-font-size-base);
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	vertical-align: middle;
}

.wsscd-analytics-perf-table tr:last-child td {
	border-bottom: none;
}

.wsscd-analytics-perf-table__meta {
	margin-top: 2px;
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted, #646970);
}

/* Empty state (centered icon + text) */
.wsscd-analytics-intel-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 40px 24px;
	text-align: center;
	min-height: 200px;
}

.wsscd-analytics-intel-empty__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--wsscd-color-surface-dark, #f0f0f1);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
}

.wsscd-analytics-intel-empty__icon .wsscd-icon {
	width: 24px;
	height: 24px;
	color: var(--wsscd-color-text-muted, #646970);
}

.wsscd-analytics-intel-empty__title {
	font-size: var(--wsscd-font-size-medium);
	font-weight: 600;
	color: var(--wsscd-color-text, #1d2327);
}

.wsscd-analytics-intel-empty__text {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted, #646970);
	max-width: 280px;
	line-height: 1.5;
}

/* Insight stat cards (2x2 grid) */
.wsscd-analytics-insight-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

.wsscd-analytics-insight-stat {
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--wsscd-color-surface, #f6f7f7);
	border: 1px solid var(--wsscd-color-border-lighter, #dcdcde);
}

.wsscd-analytics-insight-stat__val {
	font-size: var(--wsscd-font-size-xl);
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 2px;
	color: var(--wsscd-color-text, #1d2327);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wsscd-analytics-insight-stat__label {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted, #646970);
}

/* Promotion lift callout */
.wsscd-analytics-insight-callout {
	padding: 14px 18px;
	border-radius: 10px;
	background: var(--wsscd-color-primary-alpha-3);
	border: 1px solid var(--wsscd-color-primary-alpha-10);
	margin-bottom: 16px;
}

.wsscd-analytics-insight-callout p {
	margin: 0;
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted, #646970);
	line-height: 1.5;
}

.wsscd-analytics-insight-callout strong {
	color: var(--wsscd-color-primary);
}

/* Guidance / Actions */
.wsscd-analytics-guidance {
	margin-top: 0;
}

.wsscd-analytics-guidance__title {
	font-size: var(--wsscd-font-size-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wsscd-color-text-muted, #646970);
	margin: 0 0 10px;
}

.wsscd-analytics-guidance-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wsscd-analytics-guidance-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 10px;
	border: 1px solid var(--wsscd-color-warning-alpha-15, rgba(219, 166, 23, 0.15));
	background: rgba(219, 166, 23, 0.03);
	margin-bottom: 8px;
}

.wsscd-analytics-guidance-item:last-child {
	margin-bottom: 0;
}

.wsscd-analytics-guidance-item .wsscd-icon {
	width: 14px;
	height: 14px;
	color: var(--wsscd-color-warning-dark, #b19313);
	flex-shrink: 0;
	margin-top: 2px;
}

.wsscd-analytics-guidance-item strong {
	display: block;
	font-size: var(--wsscd-font-size-base);
	font-weight: 600;
	color: var(--wsscd-color-warning-dark, #b19313);
	margin-bottom: 2px;
}

.wsscd-analytics-guidance-item span {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted, #646970);
	line-height: 1.5;
}

/* ==========================================================================
   8. DATA TABLES
   ========================================================================== */

.wsscd-table-container {
	overflow-x: auto;
}

.wsscd-top-campaigns-table,
.wsscd-top-products-table {
	width: 100%;
	margin: 0;
	border: none;
	border-spacing: 0;
	border-collapse: collapse;
}


.wsscd-top-campaigns-table thead th,
.wsscd-top-products-table thead th {
	padding: 10px 16px;
	background: var(--wsscd-color-surface, #f6f7f7);
	border-bottom: 1px solid var(--wsscd-color-border-lighter, #dcdcde);
	font-size: var(--wsscd-font-size-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: left;
	color: var(--wsscd-color-text-muted);
}

.wsscd-top-campaigns-table tbody td,
.wsscd-top-products-table tbody td {
	padding: 10px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	font-size: var(--wsscd-font-size-base);
	vertical-align: middle;
}

.wsscd-top-campaigns-table tbody tr:last-child td,
.wsscd-top-products-table tbody tr:last-child td {
	border-bottom: none;
}

.wsscd-top-campaigns-table tbody tr,
.wsscd-top-products-table tbody tr {
	transition: background-color 0.1s ease;
}

.wsscd-top-campaigns-table tbody tr:hover,
.wsscd-top-products-table tbody tr:hover {
	background: var(--wsscd-color-surface);
}

/* Table Column Styles */
.wsscd-campaign-name {
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-primary);
	transition: color var(--wsscd-transition-base);
}

.wsscd-campaign-name:hover {
	color: var(--wsscd-color-primary-dark);
}

.wsscd-status {
	display: inline-flex;
	padding: 2px 8px;
	border-radius: 100px;
	font-size: var(--wsscd-font-size-small);
	font-weight: 600;
}

.wsscd-status--active {
	background: var(--wsscd-color-success-alpha-15, rgba(0, 163, 42, 0.15));
	color: var(--wsscd-color-success-dark, #008a20);
}

.wsscd-status--paused {
	background: var(--wsscd-color-warning-alpha-15, rgba(219, 166, 23, 0.15));
	color: var(--wsscd-color-warning-dark, #b19313);
}

.wsscd-status--scheduled {
	background: var(--wsscd-color-primary-alpha-10);
	color: var(--wsscd-color-primary-dark);
}

.wsscd-status--draft {
	background: var(--wsscd-color-surface-dark, #f0f0f1);
	color: var(--wsscd-color-text-muted, #646970);
}

.wsscd-status--expired {
	background: var(--wsscd-color-danger-alpha-15, rgba(214, 54, 56, 0.15));
	color: var(--wsscd-color-danger-dark, #a02222);
}

/* Column widths — apply to both th and td */
.wsscd-table-col-product { width: 40%; }
.wsscd-table-col-revenue { width: 25%; }
.wsscd-table-col-orders { width: 20%; }
.wsscd-table-col-trend { width: 15%; text-align: center; }

/* Column data styling — body cells only */
tbody .wsscd-table-col-product { font-weight: 600; color: var(--wsscd-color-text); }
tbody .wsscd-table-col-revenue { font-weight: 600; color: var(--wsscd-color-success-dark); }
tbody .wsscd-table-col-orders { color: var(--wsscd-color-text-muted); }

/* Trend Indicators */
.wsscd-trend-up,
.wsscd-trend-down,
.wsscd-trend-neutral {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: var(--wsscd-font-size-small);
	font-weight: 600;
}

.wsscd-trend-up {
	color: var(--wsscd-color-success, #00a32a);
}

.wsscd-trend-down {
	color: var(--wsscd-color-danger, #d63638);
}

.wsscd-trend-neutral {
	color: var(--wsscd-color-text-muted);
}

/* Loading state */
.wsscd-loading-row .wsscd-loading-cell {
	padding: 40px 24px;
	text-align: center;
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-base);
}

/* Empty state in tables */
.wsscd-no-data {
	padding: 40px 24px !important;
	text-align: center;
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-base);
	font-style: normal;
}

/* No activity state */
.wsscd-no-activity {
	padding: 40px 24px;
	text-align: center;
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-base);
	justify-content: center;
}

/* ==========================================================================
   10. ACTIVITY FEED
   ========================================================================== */

.wsscd-activity-status {
	display: flex;
	align-items: center;
	gap: var(--wsscd-gap-tight);
	font-size: var(--wsscd-font-size-base);
	font-weight: var(--wsscd-font-weight-medium);
	color: var(--wsscd-color-success-dark);
}

.wsscd-activity-indicator {
	width: var(--wsscd-spacing-sm);
	height: var(--wsscd-spacing-sm);
	background: var(--wsscd-color-success);
	border-radius: var(--wsscd-radius-full);
	animation: wsscd-pulse 2s ease-in-out infinite;
}

@keyframes wsscd-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.6; transform: scale(1.2); }
}

.wsscd-activity-feed {
	max-height: 400px;
	overflow-y: auto;
	position: relative;
}

.wsscd-activity-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--wsscd-color-surface-dark, #f0f0f1);
	transition: background 0.15s;
	position: relative;
}

.wsscd-activity-item:last-child {
	border-bottom: none;
}

.wsscd-activity-item:hover {
	background: var(--wsscd-color-primary-alpha-3, color-mix(in srgb, var(--wsscd-color-primary) 3%, transparent));
}

.wsscd-activity-item__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: var(--wsscd-color-primary-alpha-10);
	border-radius: 10px;
	position: relative;
	z-index: 1;
}

.wsscd-activity-item__icon .wsscd-icon {
	width: 16px;
	height: 16px;
	color: var(--wsscd-color-primary);
	fill: var(--wsscd-color-primary);
}

.wsscd-activity-item__content {
	flex: 1;
	padding-top: 2px;
}

.wsscd-activity-item__title {
	margin: 0 0 3px;
	font-size: var(--wsscd-font-size-base);
	font-weight: 500;
	color: var(--wsscd-color-text, #1d2327);
}

.wsscd-activity-item__meta {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted, #646970);
}

.wsscd-activity-placeholder {
	padding: 40px 24px;
	text-align: center;
	color: var(--wsscd-color-text-muted, #646970);
	font-size: var(--wsscd-font-size-base);
}

/* ==========================================================================
   11. FORM ELEMENTS
   ========================================================================== */

.wsscd-analytics-dashboard .wsscd-form-group {
	margin-bottom: var(--wsscd-spacing-base);
}

.wsscd-analytics-dashboard .wsscd-form-group label {
	display: block;
	margin-bottom: var(--wsscd-spacing-xs);
	font-size: var(--wsscd-font-size-base);
	font-weight: var(--wsscd-font-weight-medium);
	color: var(--wsscd-color-text);
}

.wsscd-analytics-dashboard .wsscd-form-group select {
	width: 100%;
	height: var(--wsscd-button-height);
	padding: 0 var(--wsscd-spacing-md);
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-dark);
	border-radius: var(--wsscd-radius-sm);
	font-size: var(--wsscd-font-size-base);
}

.wsscd-analytics-dashboard .wsscd-form-actions {
	display: flex;
	align-items: center;
	gap: var(--wsscd-gap-tight);
	margin-top: var(--wsscd-spacing-lg);
	padding-top: var(--wsscd-spacing-base);
	border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
}

/* ==========================================================================
   12. RESPONSIVE DESIGN
   ========================================================================== */

/* Tablet Portrait — stack two-column grids */
@media (max-width: 1024px) {
	.wsscd-analytics-grid--intelligence,
	.wsscd-analytics-grid--tables {
		grid-template-columns: 1fr;
	}

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

	.wsscd-bento-products { grid-column: 1; grid-row: auto; }
	.wsscd-bento-campaigns { grid-column: 1; grid-row: auto; }
	.wsscd-bento-activity { grid-column: 1; grid-row: auto; }

	.wsscd-dashboard-col--4,
	.wsscd-dashboard-col--6,
	.wsscd-dashboard-col--8 {
		grid-column: span 12;
	}
}

/* Mobile - Single column */
@media (max-width: 782px) {
	.wsscd-analytics-dashboard .wsscd-metrics-row {
		grid-template-columns: 1fr;
	}

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

	.wsscd-analytics-toolbar {
		flex-direction: column;
		align-items: stretch;
		padding: 10px;
	}

	.wsscd-analytics-toolbar__left,
	.wsscd-analytics-toolbar__right {
		flex-wrap: wrap;
	}

	.wsscd-analytics-toolbar__separator {
		display: none;
	}

	.wsscd-analytics-grid--intelligence,
	.wsscd-analytics-grid--tables {
		grid-template-columns: 1fr;
	}

	.wsscd-quick-date-filters {
		width: 100%;
	}

	.wsscd-quick-date-btn {
		flex: 1 1 auto;
		justify-content: center;
		min-width: 0;
		padding: var(--wsscd-padding-small) var(--wsscd-spacing-md);
		font-size: var(--wsscd-font-size-small);
	}

}

@media screen and (max-width: 600px) {
	.wsscd-analytics-grid--intelligence,
	.wsscd-analytics-grid--tables {
		grid-template-columns: 1fr;
	}

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

	.wsscd-analytics-dashboard .wsscd-metrics-row {
		grid-template-columns: 1fr;
	}

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

	.wsscd-analytics-insight-stats {
		grid-template-columns: 1fr;
	}

	.wsscd-campaign-select {
		min-width: 0;
		max-width: none;
		width: 100%;
	}

	.wsscd-date-range-select {
		min-width: 0;
		width: 100%;
	}

	.wsscd-filter-label,
	.wsscd-quick-date-btn,
	.wsscd-metric-card__change,
	.wsscd-category-chip {
		white-space: normal;
	}
}