/**
 * Campaigns Card Grid
 *
 * Card grid view for the campaigns management page.
 * Top accent bar design with inline meta, scope chips, and stat footer.
 *
 * @package    SmartCycleDiscounts
 * @since      1.8.27
 */

/* ==========================================================================
   Grid Container
   ========================================================================== */

.wsscd-card-grid {
	display: grid;
	/* Matches the page-level 10px rhythm. */
	gap: var(--wsscd-spacing-sm-large, 10px);
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

/* Empty-state block renders inside .wsscd-card-grid when AJAX search
   (or a filtered page load) returns zero matches. Spans the full grid
   width so a thin card doesn't look like a failed render. */
.wsscd-card-grid__empty {
	grid-column: 1 / -1;
	padding: 40px 16px;
}

/* ==========================================================================
   Card
   ========================================================================== */

.wsscd-campaign-card {
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition: box-shadow var(--wsscd-transition-base), border-color var(--wsscd-transition-base);
}

.wsscd-campaign-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
	border-color: var(--wsscd-color-border);
}

/* ==========================================================================
   Top Accent Bar (3px status-colored stripe)
   --
   Colors match the canonical status badge palette in shared/_badges.css:
   active=green, scheduled=blue, draft=yellow, expired=red, paused=gray.
   Keep this in sync with the list-table row-accent borders in
   campaigns-list.css so a campaign reads the same color across surfaces.
   ========================================================================== */

.wsscd-campaign-card__accent-bar {
	height: 3px;
	flex-shrink: 0;
}

.wsscd-campaign-card__accent-bar--active {
	background: var(--wsscd-color-success);
}

.wsscd-campaign-card__accent-bar--scheduled {
	background: var(--wsscd-color-primary);
}

.wsscd-campaign-card__accent-bar--draft {
	background: var(--wsscd-color-warning);
}

.wsscd-campaign-card__accent-bar--expired {
	background: var(--wsscd-color-danger);
}

.wsscd-campaign-card__accent-bar--paused,
.wsscd-campaign-card__accent-bar--inactive,
.wsscd-campaign-card__accent-bar--default {
	background: var(--wsscd-color-text-lighter);
}

/* ==========================================================================
   Card Body
   ========================================================================== */

.wsscd-campaign-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--wsscd-spacing-md) var(--wsscd-spacing-md) var(--wsscd-spacing-sm);
}

/* ==========================================================================
   Header (Name + Actions)
   ========================================================================== */

.wsscd-campaign-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
	margin-bottom: var(--wsscd-spacing-xs);
}

.wsscd-campaign-card__name {
	display: block;
	flex: 1;
	min-width: 0;
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
	letter-spacing: -0.01em;
	line-height: var(--wsscd-line-height-tight);
	overflow: hidden;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--wsscd-transition-fast);
}

.wsscd-campaign-card__name:hover,
.wsscd-campaign-card__name:focus {
	color: var(--wsscd-color-primary);
	text-decoration: none;
	outline: none;
}

/* ==========================================================================
   Header Actions (CTA + Kebab)
   ========================================================================== */

.wsscd-campaign-card__header-actions {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-xs);
	flex-shrink: 0;
}

.wsscd-campaign-card__cta {
	background: var(--wsscd-color-primary);
	border: var(--wsscd-border-width) solid var(--wsscd-color-primary);
	border-radius: var(--wsscd-radius-sm);
	color: var(--wsscd-color-white);
	cursor: pointer;
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	line-height: 1;
	padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-sm);
	text-decoration: none;
	transition: background var(--wsscd-transition-fast), border-color var(--wsscd-transition-fast);
	white-space: nowrap;
}

.wsscd-campaign-card__cta:hover {
	background: var(--wsscd-color-primary-dark);
	border-color: var(--wsscd-color-primary-dark);
	color: var(--wsscd-color-white);
	text-decoration: none;
}

.wsscd-campaign-card__cta--outline {
	background: transparent;
	border-color: var(--wsscd-color-border);
	color: var(--wsscd-color-text-muted);
}

.wsscd-campaign-card__cta--outline:hover {
	background: var(--wsscd-color-primary-alpha-3);
	border-color: var(--wsscd-color-primary);
	color: var(--wsscd-color-primary);
}

.wsscd-campaign-card__cta--success {
	background: var(--wsscd-color-success);
	border-color: var(--wsscd-color-success);
}

.wsscd-campaign-card__cta--success:hover {
	background: var(--wsscd-color-success-dark);
	border-color: var(--wsscd-color-success-dark);
	color: var(--wsscd-color-white);
}

/* Kebab Button */
.wsscd-campaign-card__kebab {
	width: 28px;
	height: 28px;
	border-radius: var(--wsscd-radius-sm);
	border: var(--wsscd-border-width) solid transparent;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wsscd-color-text-lighter);
	transition: all var(--wsscd-transition-fast);
	font-size: 16px;
	line-height: 1;
}

.wsscd-campaign-card__kebab:hover {
	border-color: var(--wsscd-color-border);
	color: var(--wsscd-color-text-muted);
	background: var(--wsscd-color-surface);
}

/* ==========================================================================
   Kebab Dropdown Menu
   ========================================================================== */

.wsscd-campaign-card__kebab-wrap {
	position: relative;
}

.wsscd-campaign-card__kebab-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	border-radius: var(--wsscd-radius-md);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	min-width: 172px;
	z-index: var(--wsscd-z-dropdown, 10);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: all 0.15s ease;
	padding: var(--wsscd-spacing-xs);
}

.wsscd-campaign-card__kebab-wrap:hover .wsscd-campaign-card__kebab-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wsscd-campaign-card__kebab-item {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
	padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-sm);
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-color-text-muted);
	cursor: pointer;
	border-radius: var(--wsscd-radius-xs);
	transition: background var(--wsscd-transition-fast), color var(--wsscd-transition-fast);
	text-decoration: none;
}

.wsscd-campaign-card__kebab-item:hover {
	background: var(--wsscd-color-surface);
	color: var(--wsscd-color-text);
	text-decoration: none;
}

.wsscd-campaign-card__kebab-item--danger {
	color: var(--wsscd-color-danger);
}

.wsscd-campaign-card__kebab-item--danger:hover {
	background: var(--wsscd-color-danger-alpha-15);
	color: var(--wsscd-color-danger);
}

.wsscd-campaign-card__kebab-separator {
	border: none;
	border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
	margin: var(--wsscd-spacing-xs) 0;
}

/* ==========================================================================
   Meta Row (Status + Priority + Type)
   ========================================================================== */

.wsscd-campaign-card__meta {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-xs);
	margin-bottom: var(--wsscd-spacing-sm);
}

.wsscd-campaign-card__meta-sep {
	color: var(--wsscd-color-border);
	font-size: var(--wsscd-font-size-small);
}

.wsscd-campaign-card__meta-text {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-lighter);
}

/* Status Badge */
.wsscd-campaign-card__badge {
	border-radius: var(--wsscd-radius-md);
	font-size: 11px;
	font-weight: var(--wsscd-font-weight-semibold);
	padding: 2px 8px;
	display: inline-flex;
	align-items: center;
	letter-spacing: 0.02em;
	line-height: var(--wsscd-line-height-tight);
}

.wsscd-campaign-card__badge--active {
	background: var(--wsscd-color-success-alpha-15);
	color: var(--wsscd-color-success);
}

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

.wsscd-campaign-card__badge--draft {
	background: var(--wsscd-color-surface);
	color: var(--wsscd-color-text-lighter);
}

.wsscd-campaign-card__badge--paused {
	background: var(--wsscd-color-warning-alpha-15);
	color: var(--wsscd-color-warning-dark);
}

.wsscd-campaign-card__badge--expired {
	background: var(--wsscd-color-surface);
	color: var(--wsscd-color-text-lighter);
}

/* ==========================================================================
   Scope Chips
   ========================================================================== */

.wsscd-campaign-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wsscd-spacing-xs);
	margin-bottom: var(--wsscd-spacing-sm);
}

.wsscd-campaign-card__chip {
	background: var(--wsscd-color-surface);
	border-radius: var(--wsscd-radius-xs);
	color: var(--wsscd-color-text-muted);
	font-size: 11px;
	font-weight: var(--wsscd-font-weight-medium);
	padding: 2px 7px;
	line-height: var(--wsscd-line-height-tight);
}

.wsscd-campaign-card__chip--accent {
	background: var(--wsscd-color-primary-alpha-10);
	color: var(--wsscd-color-primary);
}

/* ==========================================================================
   Schedule
   ========================================================================== */

.wsscd-campaign-card__schedule {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-xs);
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-lighter);
	margin-top: auto;
	padding-top: var(--wsscd-spacing-xs);
}

.wsscd-campaign-card__schedule .wsscd-icon {
	opacity: 0.6;
	flex-shrink: 0;
}

/* ==========================================================================
   Stats Footer
   ========================================================================== */

.wsscd-campaign-card__stats {
	display: flex;
	margin-top: var(--wsscd-spacing-sm);
	padding-top: var(--wsscd-spacing-sm);
	border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
}

.wsscd-campaign-card__stat {
	flex: 1;
	text-align: center;
	position: relative;
}

.wsscd-campaign-card__stat + .wsscd-campaign-card__stat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--wsscd-color-border-lighter);
}

.wsscd-campaign-card__stat-value {
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-bold);
	letter-spacing: -0.02em;
	color: var(--wsscd-color-text);
	display: block;
	line-height: 1.2;
}

.wsscd-campaign-card__stat-label {
	font-size: 10px;
	color: var(--wsscd-color-text-lighter);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: var(--wsscd-font-weight-semibold);
	margin-top: 1px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 782px) {
	.wsscd-card-grid {
		grid-template-columns: 1fr;
	}

	.wsscd-campaign-card__header {
		flex-wrap: wrap;
	}
}