/**
 * Campaigns List
 *
 * Enterprise-grade styling for the campaigns management page.
 * Inspired by Stripe Dashboard, Linear, and modern SaaS design systems.
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/admin/campaigns-list.css
 * @author     Webstepper.io <contact@webstepper.io>
 * @copyright  2025 Webstepper.io
 * @license    GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html
 * @link       https://webstepper.io/wordpress/plugins/smart-cycle-discounts/
 * @since      1.0.0
 */

/* ==========================================================================
   Page Layout
   ========================================================================== */

/* Vertical rhythm (flex column + 10px gap + child margin reset) lives in
   shared/page-header.css so it's identical across every plugin page.
   This rule only owns the campaigns-page-specific bits: full-bleed width
   and bottom padding for breathing room above the page footer. */
.wsscd-campaigns-page {
	max-width: none;
	padding-bottom: var(--wsscd-spacing-xxxl);
}

/* WP `.notice` base layout: shared/_components.css */

.wsscd-campaigns-page > .wp-header-end {
	margin: 0;
	padding: 0;
	border: none;
	height: 0;
	visibility: hidden;
}

/* Override WP page-title-action */
.wsscd-campaigns-page .page-title-action {
	display: none;
}

/* ==========================================================================
   KPI Summary Strip — Compact Inline
   ========================================================================== */

.wsscd-campaigns-summary {
	display: flex;
	flex-direction: column;
	gap: var(--wsscd-spacing-sm-large); /* 10px — matches page rhythm */
	margin: 0;
}

/* Strip container */
.wsscd-campaigns-strip {
	display: flex;
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-xl);
	overflow: hidden;
}

/* Individual strip item */
.wsscd-campaigns-strip__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 14px 16px;
	border-right: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
	text-decoration: none;
	color: inherit;
	transition: background var(--wsscd-transition-fast) var(--wsscd-ease-out);
	cursor: pointer;
	position: relative;
}

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

.wsscd-campaigns-strip__item:hover {
	background: var(--wsscd-color-surface);
}

.wsscd-campaigns-strip__item.is-active {
	background: var(--wsscd-color-surface);
	box-shadow: inset 0 -2px 0 var(--wsscd-color-primary);
}

/* Status dot */
.wsscd-campaigns-strip__dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	margin-right: 4px;
	vertical-align: middle;
}

.wsscd-campaigns-strip__dot--neutral  { background: var(--wsscd-color-gray-400); }
.wsscd-campaigns-strip__dot--success  { background: var(--wsscd-color-success); }
.wsscd-campaigns-strip__dot--info     { background: var(--wsscd-color-primary); }
/* "warning" tone in the strip is exclusively the synthesized "Attention"
   filter (paused + expired). Uses orange — distinct from Draft (yellow)
   and Trash (red) — to read as a meta alert state. Same hex used for
   dot and value (mirroring success/info/danger/draft pairs below). */
.wsscd-campaigns-strip__dot--warning  { background: #c2410c; }
.wsscd-campaigns-strip__dot--draft    { background: var(--wsscd-color-warning-dark); }
.wsscd-campaigns-strip__dot--danger   { background: var(--wsscd-color-danger); }

/* Label */
.wsscd-campaigns-strip__label {
	display: flex;
	align-items: center;
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	margin-bottom: 2px;
}

/* Value */
.wsscd-campaigns-strip__value {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 2px;
	font-variant-numeric: tabular-nums;
}

/* Tone-to-status palette — keep in sync with the canonical campaign-status
   colors used in shared/_badges.css, the list-table row borders, and the
   card-grid accent bars: active=green, scheduled=blue, draft=yellow,
   expired/trash=red, paused/inactive=gray. The "warning" tone here
   represents the synthesized "Attention" filter (paused + expired
   aggregate) and is not tied to a single lifecycle status. */
.wsscd-campaigns-strip__value--neutral  { color: var(--wsscd-color-text-muted); }
.wsscd-campaigns-strip__value--success  { color: var(--wsscd-color-success); }
.wsscd-campaigns-strip__value--info     { color: var(--wsscd-color-primary); }
/* Attention — same orange as the dot above. */
.wsscd-campaigns-strip__value--warning  { color: #c2410c; }
.wsscd-campaigns-strip__value--draft    { color: var(--wsscd-color-warning-dark); }
.wsscd-campaigns-strip__value--danger   { color: var(--wsscd-color-danger); }

/* Meta description */
.wsscd-campaigns-strip__meta {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-lighter);
}

/* Filter context toolbar */
.wsscd-campaigns-summary__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wsscd-spacing-sm);
	flex-wrap: wrap;
}

/* Hidden when there are no active filter chips. PHP adds `.is-empty`
   on initial render when no filters exist; JS toggles it after AJAX
   search responses so the toolbar appears / disappears as chips change. */
.wsscd-campaigns-summary__toolbar.is-empty {
	display: none;
}

.wsscd-campaigns-summary__active-context {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wsscd-spacing-xs);
	padding: var(--wsscd-spacing-sm) var(--wsscd-spacing-md);
	border-radius: var(--wsscd-radius-lg);
	background: var(--wsscd-color-surface);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
}

.wsscd-campaigns-summary__context-label {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted);
	font-weight: var(--wsscd-font-weight-medium);
}

.wsscd-campaigns-summary__context-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: var(--wsscd-radius-pill);
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	color: var(--wsscd-color-text-secondary);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-medium);
}

.wsscd-campaigns-summary__clear-filters {
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-primary);
	text-decoration: none;
	margin-left: var(--wsscd-spacing-xs);
}

.wsscd-campaigns-summary__clear-filters:hover,
.wsscd-campaigns-summary__clear-filters:focus-visible {
	text-decoration: underline;
	outline: none;
}

/* ==========================================================================
   Table Card Container
   ========================================================================== */

.wsscd-table-card {
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-xl);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
	overflow: hidden;
}

/* ==========================================================================
   List Toolbar (bulk actions + search)
   ========================================================================== */

/* Top tablenav — one rule for both views (table + grid). */
.wsscd-campaigns-page .wsscd-table-card .tablenav.top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wsscd-spacing-sm);
	margin: 0;
	padding: var(--wsscd-spacing-base);
	background: var(--wsscd-color-white);
	border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border-subtle);
}

/* WP's default tablenav uses floats to dock search/toggle/pagination
   to the right. Once we switch to flex those floats no-op, so nothing
   claims the free space and everything bunches on the left. Push the
   view toggle (first right-side item by DOM order) with margin-left:
   auto — pagination follows naturally on flex-gap. */
.wsscd-campaigns-page .tablenav .wsscd-view-toggle {
	margin-left: auto;
}
/* Fallback: when the toggle is hidden (trash view forces table mode),
   pagination reaches the right edge on its own. */
.wsscd-campaigns-page .tablenav:not(:has(.wsscd-view-toggle)) > .tablenav-pages {
	margin-left: auto;
}
/* Same story for the bottom tablenav — pagination to the right. */
.wsscd-campaigns-page .wsscd-table-card .tablenav.bottom > .tablenav-pages {
	margin-left: auto;
}

/* Card grid inside the panel needs breathing room — the table view
   ends its body flush with the card edges via WP's own table styling,
   but bare cards need internal padding. */
.wsscd-campaigns-page .wsscd-table-card--grid > .wsscd-card-grid {
	padding: var(--wsscd-spacing-md);
}

/* Hint in the grid tablenav's left slot — occupies the same
   horizontal position as the list view's bulk-actions dropdown so
   the elements after it (search, toggle, pagination) sit in the
   same place across views. */
.wsscd-grid-tablenav__hint-wrap {
	display: inline-flex;
	align-items: center;
	min-height: 30px; /* match WP's .actions.bulkactions height */
	padding: 0 4px;
}
.wsscd-grid-tablenav__hint {
	font-size: 12px;
	color: var(--wsscd-color-text-lighter);
	font-style: italic;
	line-height: 1.4;
}

/* Loading state for the AJAX search — dims the list body and lays a
   subtle shimmer band on top while the fetch is in flight. The class
   is toggled on the outer .wsscd-table-card wrapper so both table
   and grid bodies pick it up. */
.wsscd-campaigns-page .wsscd-table-card.is-loading {
	position: relative;
}
.wsscd-campaigns-page .wsscd-table-card.is-loading > .wp-list-table,
.wsscd-campaigns-page .wsscd-table-card.is-loading > .wsscd-card-grid,
.wsscd-campaigns-page .wsscd-table-card.is-loading form#posts-filter {
	opacity: 0.55;
	transition: opacity 0.15s ease;
	pointer-events: none;
}
.wsscd-campaigns-page .wsscd-table-card.is-loading::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0,
		var(--wsscd-color-primary) 50%,
		transparent 100%
	);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: wsscd-search-shimmer 1.1s ease-in-out infinite;
	pointer-events: none;
}
@keyframes wsscd-search-shimmer {
	0%   { background-position: -40% 0; }
	100% { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.wsscd-campaigns-page .wsscd-table-card.is-loading::after { animation: none; }
}

/* Inline error banner — shown when an AJAX search actually fails
   (network error, server 5xx, nonce expired). Sits at the top of the
   list panel so it can't be missed, but soft enough that a transient
   blip doesn't feel like a catastrophe. */
.wsscd-campaigns-search-error {
	margin: 0;
	padding: 10px 14px;
	background: rgba(245, 158, 11, 0.1);
	color: #8a5a00;
	border-bottom: 1px solid rgba(245, 158, 11, 0.35);
	font-size: 13px;
	line-height: 1.4;
}

/* Tablenav inner element styling — a single rule set applies to both
   the table view (tablenav lives inside #posts-filter) and the grid view
   (tablenav is a direct child of .wsscd-table-card--grid). Scoping to
   .wsscd-table-card matches both. */
.wsscd-campaigns-page .wsscd-table-card .tablenav.top .actions,
.wsscd-campaigns-page .wsscd-table-card .tablenav.top .bulkactions {
	float: none;
	margin: 0;
}

.wsscd-campaigns-page .wsscd-table-card .tablenav.top .search-box {
	float: none;
	margin: 0 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-spacing-xs);
}

.wsscd-campaigns-page .wsscd-table-card .tablenav.top .search-box input[type="search"] {
	height: 36px;
	min-width: 260px;
	border-radius: var(--wsscd-radius-lg);
	border-color: var(--wsscd-color-border-lighter);
	font-size: var(--wsscd-font-size-base);
	padding: 0 var(--wsscd-spacing-md);
	background: var(--wsscd-color-surface);
	transition: all var(--wsscd-transition-fast) ease;
}

.wsscd-campaigns-page .wsscd-table-card .tablenav.top .search-box input[type="search"]:focus {
	border-color: var(--wsscd-color-primary);
	box-shadow: var(--wsscd-ring-focus);
	background: var(--wsscd-color-white);
}

.wsscd-campaigns-page .wsscd-table-card .tablenav.top .search-box .button {
	height: 36px;
	border-radius: var(--wsscd-radius-lg);
}

.wsscd-campaigns-page .wsscd-table-card .tablenav.top .actions select,
.wsscd-campaigns-page .wsscd-table-card .tablenav.top .actions .button {
	height: 34px;
	border-radius: var(--wsscd-radius-md);
}

/* Bottom tablenav — same chrome for both views (table + grid). */
.wsscd-campaigns-page .wsscd-table-card .tablenav.bottom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wsscd-spacing-sm);
	margin: 0;
	padding: var(--wsscd-spacing-md) var(--wsscd-spacing-xl);
	background: var(--wsscd-color-surface);
	border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-subtle);
}

/* Pagination strip — applies to both views. */
.wsscd-campaigns-page .wsscd-table-card .tablenav .tablenav-pages {
	margin: 0;
	float: none;
}

.wsscd-campaigns-page .wsscd-table-card .tablenav-pages .pagination-links .button {
	border-radius: var(--wsscd-radius-md);
}

/* ==========================================================================
   Data Table
   ========================================================================== */

.wsscd-campaigns-page .wp-list-table {
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: var(--wsscd-color-white);
	table-layout: fixed;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

/* Table header — selector includes <td> because the cb column header is
   rendered as <td class="check-column">, not <th>, by WP_List_Table. */
.wsscd-campaigns-page .wp-list-table thead th,
.wsscd-campaigns-page .wp-list-table thead td,
.wsscd-campaigns-page .wp-list-table tfoot th,
.wsscd-campaigns-page .wp-list-table tfoot td {
	background: var(--wsscd-color-surface);
	border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border-subtle);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text-muted);
	padding: var(--wsscd-spacing-md) var(--wsscd-spacing-base);
	text-transform: uppercase;
	font-size: var(--wsscd-font-size-small);
	letter-spacing: 0.1em;
	line-height: var(--wsscd-line-height-base);
}

.wsscd-campaigns-page .wp-list-table tfoot th,
.wsscd-campaigns-page .wp-list-table tfoot td {
	border-bottom: none;
	border-top: var(--wsscd-border-width) solid var(--wsscd-color-border-subtle);
}

/* Sortable columns — WP core forces font-weight: 400 on the inner <a>
   and on the label <span> that wraps sortable header text. Override both
   so every header (top + bottom, sortable or not, primary or secondary)
   renders at the same semibold weight set on the parent th. */
.wsscd-campaigns-page .wp-list-table thead th a,
.wsscd-campaigns-page .wp-list-table tfoot th a,
.wsscd-campaigns-page .wp-list-table thead th a span,
.wsscd-campaigns-page .wp-list-table tfoot th a span {
	color: var(--wsscd-color-text-muted);
	font-weight: inherit;
	text-decoration: none;
}

.wsscd-campaigns-page .wp-list-table thead th a:hover,
.wsscd-campaigns-page .wp-list-table tfoot th a:hover {
	color: var(--wsscd-color-text);
}

.wsscd-campaigns-page .wp-list-table thead th.sorted a,
.wsscd-campaigns-page .wp-list-table tfoot th.sorted a {
	color: var(--wsscd-color-text);
}

/* Table rows */
.wsscd-campaigns-page .wp-list-table tbody tr {
	background: var(--wsscd-color-white);
	border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border-subtle);
	transition: background-color var(--wsscd-transition-fast) var(--wsscd-ease-out);
	height: auto;
}

.wsscd-campaigns-page .wp-list-table tbody tr:last-child {
	border-bottom: none;
}

/* No alternating backgrounds */
.wsscd-campaigns-page .wp-list-table tbody tr:nth-child(even) {
	background: var(--wsscd-color-white);
}

/* Hover */
.wsscd-campaigns-page .wp-list-table tbody tr:hover {
	background: var(--wsscd-color-surface);
	cursor: pointer;
}

/* Empty state row – no hover effect */
.wsscd-campaigns-page .wp-list-table tbody tr:has(.wsscd-empty-state):hover,
.wsscd-campaigns-page .wp-list-table tbody tr.wsscd-empty-state-row:hover {
	background: transparent;
	cursor: default;
}

/* Table cells */
.wsscd-campaigns-page .wp-list-table td {
	padding: var(--wsscd-spacing-base);
	vertical-align: middle;
	line-height: var(--wsscd-line-height-base);
	font-size: var(--wsscd-font-size-base);
}

/* --- Status accent borders on rows ---
   Colors match the canonical status badge palette in shared/_badges.css
   and the card-grid top-accent bars in campaigns-card-grid.css:
   active=green, scheduled=blue, draft=yellow, expired=red, paused=gray.
   Padding-left on the first cell (.column-cb) is reduced by 2px to keep
   total left edge alignment consistent with rows that have no accent. */
.wsscd-campaigns-page .wp-list-table tbody tr[data-status="active"] {
	border-left: 3px solid var(--wsscd-color-success);
}

.wsscd-campaigns-page .wp-list-table tbody tr[data-status="scheduled"] {
	border-left: 3px solid var(--wsscd-color-primary);
}

.wsscd-campaigns-page .wp-list-table tbody tr[data-status="draft"] {
	border-left: 3px solid var(--wsscd-color-warning);
}

.wsscd-campaigns-page .wp-list-table tbody tr[data-status="expired"] {
	border-left: 3px solid var(--wsscd-color-danger);
}

.wsscd-campaigns-page .wp-list-table tbody tr[data-status="paused"],
.wsscd-campaigns-page .wp-list-table tbody tr[data-status="inactive"] {
	border-left: 3px solid var(--wsscd-color-text-lighter);
}

.wsscd-campaigns-page .wp-list-table tbody tr[data-status="active"] .check-column,
.wsscd-campaigns-page .wp-list-table tbody tr[data-status="scheduled"] .check-column,
.wsscd-campaigns-page .wp-list-table tbody tr[data-status="draft"] .check-column,
.wsscd-campaigns-page .wp-list-table tbody tr[data-status="expired"] .check-column,
.wsscd-campaigns-page .wp-list-table tbody tr[data-status="paused"] .check-column,
.wsscd-campaigns-page .wp-list-table tbody tr[data-status="inactive"] .check-column {
	padding-left: calc(var(--wsscd-spacing-xl) - 2px);
}

/* Expired rows are semantically marked (red border above) and visually
   de-emphasized so they recede from the active set without disappearing. */
.wsscd-campaigns-page .wp-list-table tbody tr[data-status="expired"] {
	opacity: 0.6;
}

.wsscd-campaigns-page .wp-list-table tbody tr[data-status="expired"]:hover {
	opacity: 0.85;
}

/* ==========================================================================
   Campaign Name Column
   ========================================================================== */

/* Body cells only — these properties must NOT cascade to the <th>
   header, otherwise font-weight: medium would override the thead's
   semibold weight (column classes are applied to both th and td). */
.wsscd-campaigns-page .wp-list-table tbody .column-name {
	position: relative;
	font-weight: var(--wsscd-font-weight-medium);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ==========================================================================
   Campaign Name cell — title + 2-line description always visible. Action
   links use WordPress's native `.row-actions` markup (rendered via
   $this->row_actions()); we add no custom styling for the action toolbar,
   so the toolbar inherits the standard WP admin look (hidden until row
   hover, pipe-separated text links, default link colors).
   ========================================================================== */

.wsscd-campaign-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 56px;
}

/* Title — the focal element. Big, tight, confident. No hover state: the
   row itself is clickable (opens the overview panel), so a separate
   title link-hover treatment would just add visual noise. */
.wsscd-campaign-cell__title,
.wsscd-campaigns-page .wp-list-table .column-name .row-title {
	display: inline-block;
	font-size: var(--wsscd-font-size-large);
	font-weight: var(--wsscd-font-weight-semibold);
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: var(--wsscd-color-text);
	text-decoration: none;
}

.wsscd-campaign-cell__title:hover,
.wsscd-campaign-cell__title:focus,
.wsscd-campaign-cell__title:focus-visible,
.wsscd-campaigns-page .wp-list-table tbody tr:hover .wsscd-campaign-cell__title,
.wsscd-campaigns-page .wp-list-table .column-name .row-title:hover,
.wsscd-campaigns-page .wp-list-table .column-name .row-title:focus {
	color: var(--wsscd-color-text);
	text-decoration: none;
}

/* Description — always visible, two-line clamp. */
.wsscd-campaign-cell__description {
	margin: 0;
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-normal);
	line-height: 1.45;
	letter-spacing: 0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Row-actions hover — slightly darker than the WP defaults. The default
   action link picks up the admin color scheme (typically var(--wsscd-color-primary) and
   .submitdelete uses #b32d2e; we deepen both on hover/focus so the
   interactive state reads more clearly. Scoped to this list only. */
.wsscd-campaigns-page .wp-list-table .row-actions a:hover,
.wsscd-campaigns-page .wp-list-table .row-actions a:focus {
	color: var(--wsscd-color-primary-dark);
}

.wsscd-campaigns-page .wp-list-table .row-actions span.trash a:hover,
.wsscd-campaigns-page .wp-list-table .row-actions span.trash a:focus,
.wsscd-campaigns-page .wp-list-table .row-actions a.submitdelete:hover,
.wsscd-campaigns-page .wp-list-table .row-actions a.submitdelete:focus,
.wsscd-campaigns-page .wp-list-table .row-actions a.stop-recurring:hover,
.wsscd-campaigns-page .wp-list-table .row-actions a.stop-recurring:focus {
	color: #7a1d1f;
}

/* ==========================================================================
   Actions column — single "⋯" overflow menu. The row itself is clickable
   (opens the Campaign Overview Panel) so no separate Details button is
   rendered here. The overflow menu mirrors the secondary actions from the
   row-actions hover toolbar so touch and keyboard users have a reliable,
   always-visible path to every action.
   ========================================================================== */

.wsscd-actions-column {
	display: inline-flex;
	align-items: center;
}

/* Overflow menu trigger — neutral icon button. */
.wsscd-row-menu {
	position: relative;
}

.wsscd-row-menu__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: var(--wsscd-color-text-muted);
	background: transparent;
	border: 1px solid var(--wsscd-color-border-lighter, #dcdcde);
	border-radius: 6px;
	cursor: pointer;
	list-style: none;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

/* Hide the default disclosure triangle (Chrome/Safari/Firefox). */
.wsscd-row-menu__trigger::-webkit-details-marker {
	display: none;
}

.wsscd-row-menu__trigger {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.wsscd-row-menu__trigger .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
}

.wsscd-row-menu__trigger:hover,
.wsscd-row-menu[open] .wsscd-row-menu__trigger,
.wsscd-row-menu__trigger:focus-visible {
	color: var(--wsscd-color-text);
	background: rgba(15, 23, 42, 0.05);
	border-color: rgba(15, 23, 42, 0.18);
	outline: none;
}

.wsscd-row-menu__trigger:focus-visible {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--wsscd-color-primary) 28%, transparent);
}

/* Overflow panel — sits to the bottom-right of the trigger, above table
   row hover backgrounds. Closes via JS on outside click / Esc. */
.wsscd-row-menu__panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 50;
	min-width: 184px;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--wsscd-color-border-lighter, #dcdcde);
	border-radius: 8px;
	box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.18), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.wsscd-row-menu__item {
	display: block;
}

.wsscd-row-menu__item > a,
.wsscd-row-menu__item > span.disabled {
	display: block;
	padding: 7px 12px;
	font-size: 12.5px;
	font-weight: var(--wsscd-font-weight-medium);
	color: var(--wsscd-color-text);
	text-decoration: none;
	border-radius: 5px;
	white-space: nowrap;
	transition: background-color 120ms ease, color 120ms ease;
}

.wsscd-row-menu__item > a:hover,
.wsscd-row-menu__item > a:focus-visible {
	color: var(--wsscd-color-primary);
	background: var(--wsscd-color-primary-alpha-8);
	outline: none;
}

.wsscd-row-menu__item--danger > a {
	color: var(--wsscd-color-danger);
}

.wsscd-row-menu__item--danger > a:hover,
.wsscd-row-menu__item--danger > a:focus-visible {
	color: #fff;
	background: var(--wsscd-color-danger);
}

.wsscd-row-menu__item > span.disabled {
	color: var(--wsscd-color-text-faint, #a7aaad);
	cursor: not-allowed;
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.wsscd-row-menu__trigger,
	.wsscd-row-menu__item > a {
		transition: none !important;
	}
}

/* Cell strong / small */
.wsscd-campaigns-page .wp-list-table td strong {
	color: var(--wsscd-color-text);
	font-weight: var(--wsscd-font-weight-semibold);
	font-size: var(--wsscd-font-size-base);
}

.wsscd-campaigns-page .wp-list-table td small {
	color: var(--wsscd-color-text-lighter);
	font-size: var(--wsscd-font-size-small);
	display: block;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ==========================================================================
   Schedule Column – Structured Layout
   ========================================================================== */

.wsscd-schedule-cell {
	display: flex;
	flex-direction: column;
	gap: var(--wsscd-spacing-xs);
	font-size: var(--wsscd-font-size-small);
}

.wsscd-schedule-cell__row {
	display: flex;
	align-items: baseline;
	gap: var(--wsscd-spacing-xs);
}

.wsscd-schedule-cell__label {
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text-lighter);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	min-width: 34px;
}

.wsscd-schedule-cell__date {
	font-weight: var(--wsscd-font-weight-medium);
	color: var(--wsscd-color-text);
	font-size: var(--wsscd-font-size-small);
}

.wsscd-schedule-cell__date--muted {
	color: var(--wsscd-color-text-lighter);
	font-style: italic;
	font-weight: var(--wsscd-font-weight-normal);
}

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

/* ==========================================================================
   Actions Column
   ========================================================================== */

.wsscd-actions-column {
	display: flex;
	gap: 4px;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.wsscd-action-disabled,
.wsscd-button--disabled-state {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ==========================================================================
   Column Widths
   ========================================================================== */

/*
 * Column widths are sized to actual content rather than percentages.
 * `column-name` is intentionally left without a width so it absorbs
 * remaining horizontal space — every other column is content-bounded.
 */
/* Checkbox column — single source of truth. WP applies `column-cb` to the
   header <td> but only `check-column` to the body <th scope="row">, so both
   selectors are needed to cover the full column. */
.wsscd-campaigns-page .wp-list-table .column-cb,
.wsscd-campaigns-page .wp-list-table .check-column {
	width: 40px;
	padding: var(--wsscd-spacing-base) var(--wsscd-spacing-sm) var(--wsscd-spacing-base) var(--wsscd-spacing-xl);
	vertical-align: middle;
}

.wsscd-campaigns-page .wp-list-table .column-cb input[type="checkbox"],
.wsscd-campaigns-page .wp-list-table .check-column input[type="checkbox"] {
	margin: 0;
	vertical-align: middle;
}

.wsscd-campaigns-page .wp-list-table .column-name {
	min-width: 230px;
	text-align: start;
}

.wsscd-campaigns-page .wp-list-table .column-status {
	width: 100px;
	text-align: center;
	padding-left: var(--wsscd-spacing-sm) !important;
	padding-right: var(--wsscd-spacing-sm) !important;
}

.wsscd-campaigns-page .wp-list-table .column-intelligence {
	width: 260px;
	text-align: start;
}

.wsscd-campaigns-page .wp-list-table .column-discount {
	width: 180px;
	text-align: start;
}

.wsscd-campaigns-page .wp-list-table .column-schedule {
	width: 200px;
	text-align: start;
}

.wsscd-campaigns-page .wp-list-table .column-actions {
	width: 60px;
	text-align: end;
	padding-right: var(--wsscd-spacing-lg) !important;
}

.wsscd-intel-list {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wsscd-intel-list__status {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 3px 9px;
	border-radius: var(--wsscd-radius-sm);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-semibold);
	line-height: 1.2;
	white-space: nowrap;
}

.wsscd-intel-list__status--critical {
	background: var(--wsscd-color-danger-lighter);
	color: var(--wsscd-color-danger-dark);
}

.wsscd-intel-list__status--warn {
	background: var(--wsscd-color-warning-lighter);
	color: var(--wsscd-color-warning-dark);
}

.wsscd-intel-list__status--info {
	background: var(--wsscd-color-surface);
	color: var(--wsscd-color-text-muted);
}

.wsscd-intel-list__reason {
	display: -webkit-box;
	margin: 0;
	font-size: var(--wsscd-font-size-small);
	line-height: 1.4;
	color: var(--wsscd-color-text-muted);
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wsscd-intel-list__muted {
	font-size: var(--wsscd-font-size-small);
	line-height: 1.4;
	color: var(--wsscd-color-text-muted);
}

.wsscd-intel-list__cta {
	display: inline-block;
	margin-top: var(--wsscd-space-3, 6px);
	font-size: var(--wsscd-font-size-small);
	line-height: 1.4;
	color: var(--wsscd-color-primary);
	text-decoration: none;
}

.wsscd-intel-list__cta:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Attributes column (recurring, free shipping) — icon-only indicators
   ========================================================================== */

.wp-list-table .column-attributes {
	width: 100px;
	text-align: center;
}

.wsscd-attrs {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--wsscd-spacing-xs);
	align-items: center;
	justify-content: center;
	max-width: 100%;
}

.wsscd-attrs--empty {
	color: var(--wsscd-color-text-muted);
	opacity: 0.5;
}

.wsscd-attr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: transparent;
	cursor: help;
	transition: background-color 120ms ease, color 120ms ease;
}

.wsscd-attr .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
}

.wsscd-attr:hover {
	background: var(--wsscd-color-bg-subtle, rgba(0, 0, 0, 0.04));
}

.wsscd-attr-recurring--active { color: var(--wsscd-color-success, #00a32a); }
.wsscd-attr-recurring--inactive { color: var(--wsscd-color-text-muted); }
.wsscd-attr-recurring--child { color: var(--wsscd-color-info); }
.wsscd-attr-free-shipping { color: var(--wsscd-color-info); }
.wsscd-attr-roles { color: var(--wsscd-color-warning, #b26200); }
.wsscd-attr-roles--exclude { color: var(--wsscd-color-danger, #b32d2e); }
.wsscd-attr-conditions { color: var(--wsscd-color-warning, #b26200); }
.wsscd-attr-usage-limit { color: var(--wsscd-color-warning, #b26200); }
.wsscd-attr-priority--high { color: var(--wsscd-color-danger, #b32d2e); }
.wsscd-attr-priority--low { color: var(--wsscd-color-text-muted); }

/* ==========================================================================
   Discount column — compact two-line summary
   ========================================================================== */

.wsscd-discount-cell {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}

.wsscd-discount-cell__type {
	font-weight: 600;
	color: var(--wsscd-color-text);
}

.wsscd-discount-cell__scope {
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted);
}

.column-schedule .recurring-info {
	display: block;
	margin-top: var(--wsscd-spacing-sm);
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-color-text-muted);
}

.column-schedule .recurring-info strong { color: var(--wsscd-color-text); }

/* Draft notice now renders through WSSCD_Admin_Notice_Helper — its styles
   live in resources/assets/css/admin/wsscd-notice.css (`.wsscd-notice` +
   severity tones + `.wsscd-notice__chip` for the urgency meta chip). The
   per-class draft-notice rules previously in this section have been removed
   to keep one source of truth for notice styling. */

/* ==========================================================================
   Empty State
   ========================================================================== */

.wsscd-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 60px var(--wsscd-spacing-xl);
	min-height: 360px;
	cursor: default;
}

.wp-list-table tbody .wsscd-empty-state {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.wp-list-table tbody tr:has(.wsscd-empty-state),
.wp-list-table tbody tr.wsscd-empty-state-row,
.wp-list-table tbody tr .wsscd-empty-state,
.wp-list-table tbody td:has(.wsscd-empty-state),
.wp-list-table tbody tr.wsscd-empty-state-row td {
	cursor: default;
}

.wsscd-empty-state__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: var(--wsscd-spacing-xl);
	background: linear-gradient(135deg, var(--wsscd-color-primary-light-bg) 0%, var(--wsscd-color-info-lighter) 100%);
	border: 2px solid var(--wsscd-color-border-lighter);
	border-radius: var(--wsscd-radius-xxl);
	color: var(--wsscd-color-primary);
}

.wsscd-empty-state__icon .wsscd-icon,
.wsscd-empty-state__icon svg {
	color: var(--wsscd-color-primary);
	fill: var(--wsscd-color-primary);
	opacity: 0.85;
}

.wsscd-empty-state__title {
	margin: 0 0 var(--wsscd-spacing-sm) 0;
	font-size: var(--wsscd-font-size-xl);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
	line-height: var(--wsscd-line-height-tight);
	letter-spacing: -0.02em;
}

.wsscd-empty-state__description {
	margin: 0 0 var(--wsscd-spacing-xxl) 0;
	max-width: 380px;
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-color-text-muted);
	line-height: 1.65;
}

.wsscd-empty-state__actions {
	display: flex;
	gap: var(--wsscd-spacing-md);
	flex-wrap: wrap;
	justify-content: center;
}

.wsscd-empty-state__actions .wsscd-button,
.wsscd-empty-state__actions a { cursor: pointer; }

.wsscd-empty-state__actions .wsscd-button--large {
	padding: var(--wsscd-spacing-md) var(--wsscd-spacing-xl);
	font-size: var(--wsscd-font-size-medium);
}

/* ==========================================================================
   View Toggle — lives inside WP's native `.tablenav top` strip (docked
   right next to search / pagination / bulk actions) for both the table
   and grid views. Both views render through one shared code path
   (WSSCD_Campaigns_List_Table::display_tablenav) so the chrome can't
   drift between views.
   ========================================================================== */

.wsscd-campaigns-page .wsscd-view-toggle {
	/* Reset any ancient inline-flex styling from earlier versions of this
	   control so it sits cleanly inside the .tablenav flex row. Note:
	   don't use `margin: 0` shorthand — it would overwrite the
	   `margin-left: auto` rule above that right-docks this element. */
	padding: 0;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.wsscd-campaigns-page .wsscd-view-toggle__group {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	background: rgba(10, 37, 64, 0.05);
	border: 1px solid rgba(10, 37, 64, 0.08);
	border-radius: 7px;
}

.wsscd-campaigns-page .wsscd-view-toggle__btn {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--wsscd-color-text-lighter);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	padding: 4px 8px;
	border-radius: 5px;
	transition: color 0.12s, background 0.12s, box-shadow 0.12s;
	line-height: 1;
	min-height: 28px; /* match WP tablenav button height */
}

.wsscd-campaigns-page .wsscd-view-toggle__btn:hover {
	color: var(--wsscd-color-primary);
	background: rgba(10, 37, 64, 0.04);
}

.wsscd-campaigns-page .wsscd-view-toggle__btn--active {
	color: var(--wsscd-color-primary);
	background: var(--wsscd-color-white);
	box-shadow: 0 1px 3px rgba(10, 37, 64, 0.12);
}

.wsscd-campaigns-page .wsscd-view-toggle__btn:focus-visible {
	outline: 2px solid var(--wsscd-color-primary);
	outline-offset: 2px;
}

.wsscd-campaigns-page .wsscd-view-toggle__btn .wsscd-icon {
	width: 16px;
	height: 16px;
}

/* Grid view's synthesized .tablenav needs a touch of vertical spacing
   above the card grid. WP's own tablenav handles this for table view. */
.wsscd-campaigns-page > .subsubsub + .tablenav.top {
	margin-bottom: var(--wsscd-spacing-md);
}

/* ==========================================================================
   Responsive – Wide screens
   ========================================================================== */

@media screen and (max-width: 1280px) {
	/* Drop the schedule column at narrower viewports — start/end dates are
	   the lowest-priority info; everything else stays at its content-based
	   width and `column-name` continues to absorb the freed space. */
	.wsscd-campaigns-page .wp-list-table .column-schedule { display: none; }
	.wsscd-campaigns-page .wp-list-table .column-name { min-width: 180px; }
	.wp-list-table .column-attributes { width: 120px; }
	.wsscd-campaigns-page .wp-list-table .column-intelligence { width: 220px; }
	.wsscd-campaigns-page .wp-list-table .column-discount { width: 160px; }
}

/* ==========================================================================
   Responsive – Mobile
   ========================================================================== */

@media screen and (max-width: 782px) {
	.wsscd-campaigns-page .wsscd-page-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wsscd-spacing-md);
		padding: var(--wsscd-spacing-lg);
	}

	.wsscd-campaigns-page .wsscd-page-header__actions {
		flex-wrap: wrap;
		width: 100%;
	}

	.wsscd-campaigns-strip {
		flex-wrap: wrap;
	}

	.wsscd-campaigns-strip__item {
		flex: 1 1 calc(50% - 1px);
		border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border-lighter);
	}

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

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

	.wsscd-campaigns-strip__value {
		font-size: var(--wsscd-font-size-xxl);
	}

	.wsscd-campaigns-summary__toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.wsscd-campaigns-page .wsscd-table-card .tablenav.top .search-box {
		margin-left: 0;
		width: 100%;
	}

	.wsscd-campaigns-page .wsscd-table-card .tablenav.top .search-box input[type="search"] {
		min-width: 0;
		width: 100%;
	}

	.wsscd-actions-column {
		gap: var(--wsscd-spacing-sm);
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.wp-list-table .column-attributes {
		width: auto;
		text-align: start;
	}

	.wsscd-empty-state {
		padding: var(--wsscd-spacing-xxl) var(--wsscd-spacing-md);
		min-height: 260px;
	}

	.wsscd-empty-state__icon {
		width: 56px;
		height: 56px;
		margin-bottom: var(--wsscd-spacing-lg);
	}

	.wsscd-empty-state__icon .wsscd-icon,
	.wsscd-empty-state__icon svg {
		width: 28px !important;
		height: 28px !important;
	}

	.wsscd-empty-state__title { font-size: var(--wsscd-font-size-large); }
	.wsscd-empty-state__description { font-size: var(--wsscd-font-size-small); }
	.wsscd-empty-state__actions .wsscd-button--large { width: 100%; }

	.wsscd-table-card {
		border-radius: var(--wsscd-radius-lg);
	}
}

@media screen and (max-width: 600px) {
	.wsscd-campaigns-page .search-box input[type="search"] {
		min-width: 0;
		width: 100%;
	}

	.wsscd-campaigns-page .search-box {
		flex-direction: column;
		gap: 6px;
	}

	.wsscd-campaigns-table .column-name {
		min-width: 0;
	}

	.wsscd-campaigns-table .column-intelligence,
	.wsscd-campaigns-table .column-schedule,
	.wsscd-campaigns-table .column-discount,
	.wsscd-campaigns-table .column-actions {
		min-width: 0;
	}

	.wsscd-campaign-cell__description,
	.wsscd-intel-list__muted {
		white-space: normal;
	}

}

/* ==========================================================================
   Responsive – Mid-range tablet
   ========================================================================== */

@media screen and (min-width: 783px) and (max-width: 1024px) {
	.wsscd-campaigns-strip__value {
		font-size: 22px;
	}

	.wsscd-campaigns-strip__item {
		padding: 12px 10px;
	}

	.wsscd-campaigns-page .wsscd-page-header__actions {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-contrast: high) {
	.wsscd-campaigns-strip {
		border-width: var(--wsscd-border-width-thick);
	}

	.wsscd-campaigns-page .wsscd-page-header {
		border-width: var(--wsscd-border-width-thick);
	}

	.wsscd-table-card {
		border-width: var(--wsscd-border-width-thick);
	}
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
	.wsscd-campaigns-page .wsscd-page-header__actions { display: none; }

	.wsscd-campaigns-page .wsscd-page-header,
	.wsscd-campaigns-strip,
	.wsscd-table-card {
		box-shadow: none;
		border-color: var(--wsscd-color-text);
	}

}