/**
 * Sync Queue Modern Styles
 *
 * Modern, clean UI for the Sync Queue page with design tokens,
 * enhanced sub-tabs, card-based table styling, and modern pagination.
 *
 * @package    MOMCS_Sync
 * @subpackage MOMCS_Sync/assets/css
 * @author     miniOrange
 * @since      1.0.0
 */

/* ==========================================================================
   Design Tokens (Reuse from Product Listing)
   ========================================================================== */

/* Design tokens are inherited from product-list-modern.css */
/* If not loaded, define fallback tokens */
:root {
	/* Colors - Primary */
	--momcs-bg-primary: #ffffff;
	--momcs-bg-secondary: #f8f9fa;
	--momcs-bg-tertiary: #f1f3f5;
	--momcs-bg-hover: #f0f4f8;

	/* Colors - Borders */
	--momcs-border-color: #e5e7eb;
	--momcs-border-color-light: #f0f0f0;
	--momcs-border-color-dark: #d1d5db;

	/* Colors - Text */
	--momcs-text-primary: #1f2937;
	--momcs-text-secondary: #6b7280;
	--momcs-text-muted: #9ca3af;
	--momcs-text-white: #ffffff;

	/* Colors - Accent */
	--momcs-accent-blue: #3b82f6;
	--momcs-accent-blue-hover: #2563eb;
	--momcs-accent-blue-light: #eff6ff;
	--momcs-accent-green: #10b981;
	--momcs-accent-green-light: #d1fae5;
	--momcs-accent-orange: #ff6a00
	;
	--momcs-accent-orange-hover: #d97706;
	--momcs-accent-orange-light: #fff7ed;
	--momcs-accent-red: #ef4444;
	--momcs-accent-red-light: #fee2e2;
	--momcs-accent-purple: #8b5cf6;
	--momcs-accent-purple-light: #ede9fe;

	/* Border Radius */
	--momcs-radius-xs: 4px;
	--momcs-radius-sm: 6px;
	--momcs-radius-md: 8px;
	--momcs-radius-lg: 12px;
	--momcs-radius-xl: 16px;
	--momcs-radius-full: 6px;

	/* Shadows */
	--momcs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
	--momcs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--momcs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
	--momcs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
	--momcs-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Spacing */
	--momcs-spacing-xs: 4px;
	--momcs-spacing-sm: 8px;
	--momcs-spacing-md: 12px;
	--momcs-spacing-lg: 11px;
	--momcs-spacing-xl: 24px;
	--momcs-spacing-2xl: 32px;

	/* Typography */
	--momcs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--momcs-font-size-xs: 11px;
	--momcs-font-size-sm: 12px;
	--momcs-font-size-md: 13px;
	--momcs-font-size-base: 11px;
	--momcs-font-size-lg: 16px;
	--momcs-font-size-xl: 18px;
	--momcs-font-size-2xl: 24px;
	--momcs-font-weight-normal: 400;
	--momcs-font-weight-medium: 500;
	--momcs-font-weight-semibold: 600;
	--momcs-font-weight-bold: 700;
	--momcs-line-height-tight: 1.25;
	--momcs-line-height-normal: 1.5;

	/* Transitions */
	--momcs-transition-fast: 0.15s ease;
	--momcs-transition-normal: 0.2s ease;
	--momcs-transition-slow: 0.3s ease;
}

/* ==========================================================================
   Modern Queue Container
   ========================================================================== */

.momcs-sync-wrap {
	font-family: var(--momcs-font-family);
}

/* ==========================================================================
   Page Header
   ========================================================================== */

.momcs-queue-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--momcs-spacing-lg);
	padding: var(--momcs-spacing-lg) 0;
	margin-bottom: var(--momcs-spacing-lg);
}

.momcs-queue-header-left {
	display: flex;
	align-items: center;
	gap: var(--momcs-spacing-lg);
}

.momcs-queue-title {
	font-size: var(--momcs-font-size-2xl);
	font-weight: var(--momcs-font-weight-bold);
	color: var(--momcs-text-primary);
	margin: 0;
	line-height: var(--momcs-line-height-tight);
}

.momcs-queue-count {
	display: inline-flex;
	align-items: center;
	background: var(--momcs-bg-secondary);
	color: var(--momcs-text-secondary);
	font-size: var(--momcs-font-size-sm);
	font-weight: var(--momcs-font-weight-medium);
	padding: var(--momcs-spacing-xs) var(--momcs-spacing-md);
	border-radius: var(--momcs-radius-full);
}

/* ==========================================================================
   Notice Box
   ========================================================================== */

.momcs-orders-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--momcs-spacing-md);
	padding: var(--momcs-spacing-md) var(--momcs-spacing-lg);
	background: var(--momcs-accent-orange-light);
	border: 1px solid #fde68a;
	border-radius: var(--momcs-radius-md);
	margin-bottom: var(--momcs-spacing-lg);
}

.momcs-orders-notice p {
	margin: 0;
	font-size: var(--momcs-font-size-sm);
	color: #b45309;
	line-height: var(--momcs-line-height-normal);
}

.momcs-orders-notice .dashicons {
	flex-shrink: 0;
	color: var(--momcs-accent-orange);
}

/* ==========================================================================
   Enhanced Sub-Tabs
   ========================================================================== */

.momcs-sync-sub-tabs-modern {
	display: flex;
	gap: var(--momcs-spacing-xs);
	margin-bottom: var(--momcs-spacing-lg);
	padding: 0;
	border-bottom: 1px solid var(--momcs-border-color);
}

.momcs-sync-sub-tab-modern {
	padding: var(--momcs-spacing-md) var(--momcs-spacing-xl);
	font-size: var(--momcs-font-size-md);
	font-weight: var(--momcs-font-weight-medium);
	color: var(--momcs-text-secondary);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: var(--momcs-radius-sm) var(--momcs-radius-sm) 0 0;
	cursor: pointer;
	transition: all var(--momcs-transition-normal);
	text-decoration: none;
	position: relative;
	top: 1px;
}

.momcs-sync-sub-tab-modern:hover {
	color: var(--momcs-accent-orange);
	background: var(--momcs-bg-secondary);
	border-bottom-color: var(--momcs-border-color-dark);
}

.momcs-sync-sub-tab-modern.active {
	color: var(--momcs-accent-orange);
	background: var(--momcs-bg-primary);
	border-bottom-color: var(--momcs-accent-orange);
	font-weight: var(--momcs-font-weight-semibold);
}

/* ==========================================================================
   Card-Style Table Container
   ========================================================================== */

.momcs-queue-table-container {
	background: var(--momcs-bg-primary);
	border-radius: var(--momcs-radius-lg);
	box-shadow: var(--momcs-shadow-sm);
	border: 1px solid var(--momcs-border-color);
	overflow: hidden;
	margin-bottom: var(--momcs-spacing-lg);
}

.momcs-queue-table-modern {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.momcs-queue-table-modern thead {
	background: var(--momcs-bg-secondary);
	border-bottom: 1px solid var(--momcs-border-color);
}

.momcs-queue-table-modern thead th {
	padding: var(--momcs-spacing-md) var(--momcs-spacing-lg);
	font-size: var(--momcs-font-size-sm);
	font-weight: var(--momcs-font-weight-semibold);
	color: var(--momcs-text-primary);
	text-align: left;
	border-bottom: 1px solid var(--momcs-border-color);
}

.momcs-queue-table-modern tbody tr {
	border-bottom: 1px solid var(--momcs-border-color-light);
	transition: background-color var(--momcs-transition-fast);
}

.momcs-queue-table-modern tbody tr:hover {
	background: var(--momcs-bg-hover);
}

.momcs-queue-table-modern tbody tr:last-child {
	border-bottom: none;
}

.momcs-queue-table-modern tbody td {
	padding: var(--momcs-spacing-md) var(--momcs-spacing-lg);
	font-size: var(--momcs-font-size-md);
	color: var(--momcs-text-primary);
	vertical-align: middle;
}

/* ==========================================================================
   Enhanced Status Chips
   ========================================================================== */

.momcs-sync-status-chip-modern {
	display: inline-flex;
	align-items: center;
	gap: var(--momcs-spacing-xs);
	padding: var(--momcs-spacing-xs) var(--momcs-spacing-md);
	border-radius: var(--momcs-radius-full);
	font-size: var(--momcs-font-size-xs);
	font-weight: var(--momcs-font-weight-medium);
	line-height: var(--momcs-line-height-normal);
	white-space: nowrap;
	transition: all var(--momcs-transition-fast);
}

.momcs-sync-status-dot-modern {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.momcs-sync-status-chip-modern.success {
	background-color: var(--momcs-accent-green-light);
	color: var(--momcs-accent-green);
}

.momcs-sync-status-chip-modern.success .momcs-sync-status-dot-modern {
	background-color: var(--momcs-accent-green);
}

.momcs-sync-status-chip-modern.error {
	background-color: var(--momcs-accent-red-light);
	color: var(--momcs-accent-red);
}

.momcs-sync-status-chip-modern.error .momcs-sync-status-dot-modern {
	background-color: var(--momcs-accent-red);
}

.momcs-sync-status-chip-modern.warning {
	background-color: var(--momcs-accent-orange-light);
	color: #b45309;
}

.momcs-sync-status-chip-modern.warning .momcs-sync-status-dot-modern {
	background-color: #b45309;
}

.momcs-sync-status-chip-modern.info {
	background-color: var(--momcs-accent-blue-light);
	color: var(--momcs-accent-blue);
}

.momcs-sync-status-chip-modern.info .momcs-sync-status-dot-modern {
	background-color: var(--momcs-accent-blue);
}

.momcs-sync-status-chip-modern.default {
	background-color: var(--momcs-bg-secondary);
	color: var(--momcs-text-secondary);
}

.momcs-sync-status-chip-modern.default .momcs-sync-status-dot-modern {
	background-color: var(--momcs-text-secondary);
}

/* ==========================================================================
   Channel/Marketplace Display
   ========================================================================== */

.momcs-sync-channel-marketplace {
	font-size: var(--momcs-font-size-md);
	line-height: var(--momcs-line-height-normal);
}

.momcs-channel-name {
	font-weight: var(--momcs-font-weight-semibold);
	color: var(--momcs-text-primary);
}

.momcs-marketplace-separator {
	color: var(--momcs-text-muted);
	margin: 0 var(--momcs-spacing-xs);
}

.momcs-marketplace-name {
	color: var(--momcs-text-secondary);
}

.momcs-product-count {
	color: var(--momcs-text-muted);
	font-size: var(--momcs-font-size-xs);
	margin-top: var(--momcs-spacing-xs);
	display: block;
}

.momcs-sync-channel-info {
	font-size: var(--momcs-font-size-md);
	line-height: var(--momcs-line-height-normal);
}

.momcs-sync-channel-info strong {
	color: var(--momcs-text-primary);
	font-weight: var(--momcs-font-weight-semibold);
}

/* Audit info as columns (Scheduled syncs & Order syncs) */
.momcs-audit-cols {
	display: flex;
	flex-wrap: wrap;
	gap: var(--momcs-spacing-md) var(--momcs-spacing-xl);
	font-size: var(--momcs-font-size-md);
	line-height: var(--momcs-line-height-normal);
}

.momcs-audit-col {
	display: flex;
	flex-direction: column;
	gap: var(--momcs-spacing-xs);
	min-width: 0;
}

.momcs-audit-col strong {
	font-size: var(--momcs-font-size-xs);
	font-weight: var(--momcs-font-weight-semibold);
	color: var(--momcs-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.momcs-audit-col span {
	color: var(--momcs-text-primary);
	font-weight: var(--momcs-font-weight-normal);
}

.momcs-scheduled-audit-cols.momcs-audit-cols,
.momcs-order-audit-cols.momcs-audit-cols {
	align-items: flex-start;
}

.momcs-order-sync-info {
	font-size: var(--momcs-font-size-md);
	line-height: var(--momcs-line-height-normal);
}

.momcs-order-sync-info strong {
	color: var(--momcs-text-primary);
	font-weight: var(--momcs-font-weight-semibold);
}

/* Product chips */
.momcs-sync-product-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--momcs-spacing-xs) var(--momcs-spacing-md);
	border-radius: var(--momcs-radius-full);
	font-size: var(--momcs-font-size-xs);
	font-weight: var(--momcs-font-weight-medium);
	line-height: var(--momcs-line-height-normal);
	background-color: var(--momcs-bg-secondary);
	color: var(--momcs-text-secondary);
	margin: var(--momcs-spacing-xs);
	border: 1px solid var(--momcs-border-color);
	transition: all var(--momcs-transition-fast);
}

.momcs-sync-product-chip:hover {
	background-color: var(--momcs-bg-tertiary);
	border-color: var(--momcs-border-color-dark);
}

.momcs-sync-product-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--momcs-spacing-xs);
}

.momcs-sync-product-count {
	font-size: var(--momcs-font-size-md);
	color: var(--momcs-text-secondary);
}

/* ==========================================================================
   Action Links
   ========================================================================== */

.momcs-view-logs {
	color: var(--momcs-accent-orange);
	text-decoration: none;
	font-size: var(--momcs-font-size-md);
	font-weight: var(--momcs-font-weight-medium);
	transition: color var(--momcs-transition-fast);
}

.momcs-view-logs:hover {
	color: var(--momcs-accent-orange-hover);
	text-decoration: underline;
}

.momcs-cancel-sync {
	color: #ea580c;
	text-decoration: none;
	font-size: var(--momcs-font-size-md);
	font-weight: var(--momcs-font-weight-medium);
	transition: color var(--momcs-transition-fast);
}

.momcs-cancel-sync:hover {
	color: #c2410c;
	text-decoration: underline;
}

/* ==========================================================================
   Modern Pagination
   ========================================================================== */

.momcs-pagination-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--momcs-spacing-lg);
	padding: var(--momcs-spacing-lg) 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.momcs-pagination-wrapper.top {
	border-bottom: 1px solid var(--momcs-border-color);
	margin-bottom: var(--momcs-spacing-md);
	padding-bottom: var(--momcs-spacing-md);
}

.momcs-pagination-wrapper.bottom {
	border-top: 1px solid var(--momcs-border-color);
	margin-top: var(--momcs-spacing-md);
	padding-top: var(--momcs-spacing-md);
}

/* Show Entries UI */
.momcs-pagination-per-page {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	background: var(--momcs-bg-primary);
	border-radius: var(--momcs-radius-md);
	box-shadow: var(--momcs-shadow-sm);
	border: 1px solid var(--momcs-border-color-light);
	height: 34px;
	transition: all var(--momcs-transition-fast);
}

.momcs-pagination-per-page:hover {
	box-shadow: var(--momcs-shadow-md);
}

.momcs-pagination-per-page span {
	font-size: var(--momcs-font-size-xs);
	font-weight: var(--momcs-font-weight-medium);
	color: var(--momcs-text-secondary);
	white-space: nowrap;
}

.momcs-per-page-select {
	height: 22px;
	min-width: 70px;
	padding: 0 16px 0 2px;
	font-size: var(--momcs-font-size-xs) !important;
	font-weight: var(--momcs-font-weight-medium);
	color: var(--momcs-text-primary);
	background: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	border: none;
	cursor: pointer;
	appearance: none;
	transition: all var(--momcs-transition-fast);
}

.momcs-per-page-select:hover {
	color: var(--momcs-accent-orange);
}

.momcs-per-page-select:focus {
	outline: none;
	color: var(--momcs-accent-orange);
}

.momcs-pagination-info {
	font-size: var(--momcs-font-size-sm);
	color: var(--momcs-text-secondary);
}

.momcs-pagination-info strong {
	font-weight: var(--momcs-font-weight-semibold);
	color: var(--momcs-text-primary);
}

.momcs-pagination-nav {
	display: flex;
	align-items: center;
	gap: var(--momcs-spacing-xs);
}

.momcs-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--momcs-bg-primary);
	border: 1px solid var(--momcs-border-color);
	border-radius: var(--momcs-radius-sm);
	cursor: pointer;
	transition: all var(--momcs-transition-fast);
	text-decoration: none;
	color: var(--momcs-text-secondary);
}

.momcs-page-btn:hover:not(:disabled) {
	background: var(--momcs-bg-secondary);
	border-color: var(--momcs-border-color-dark);
	color: var(--momcs-text-primary);
}

.momcs-page-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.momcs-page-btn svg {
	width: 16px;
	height: 16px;
	color: inherit;
}

.momcs-page-numbers {
	display: flex;
	align-items: center;
	gap: var(--momcs-spacing-xs);
}

.momcs-page-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 var(--momcs-spacing-sm);
	font-size: var(--momcs-font-size-sm);
	font-weight: var(--momcs-font-weight-medium);
	color: var(--momcs-text-secondary);
	background: var(--momcs-bg-primary);
	border: 1px solid var(--momcs-border-color);
	border-radius: var(--momcs-radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--momcs-transition-fast);
}

.momcs-page-num:hover {
	background: var(--momcs-bg-secondary);
	border-color: var(--momcs-border-color-dark);
	color: var(--momcs-text-primary);
}

.momcs-page-num.active {
	background: var(--momcs-accent-orange);
	border-color: var(--momcs-accent-orange);
	color: var(--momcs-text-white);
}

.momcs-page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: var(--momcs-font-size-sm);
	color: var(--momcs-text-muted);
}

/* ==========================================================================
   Modern Modal Styling
   ========================================================================== */

.momcs-sync-modal-overlay-modern {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998;
	backdrop-filter: blur(2px);
}

.momcs-sync-modal-modern {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background: var(--momcs-bg-primary);
	padding: 0;
	max-width: 900px;
	width: calc(100% - 80px);
	max-height: 80vh;
	overflow: hidden;
	border-radius: var(--momcs-radius-lg);
	box-shadow: var(--momcs-shadow-xl);
	display: flex;
	flex-direction: column;
}

.momcs-sync-modal-header-modern {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--momcs-spacing-lg) var(--momcs-spacing-xl);
	border-bottom: 1px solid var(--momcs-border-color);
	background: var(--momcs-bg-secondary);
}

.momcs-sync-modal-header-modern h2 {
	margin: 0;
	padding: 0;
	font-size: var(--momcs-font-size-xl);
	font-weight: var(--momcs-font-weight-semibold);
	color: var(--momcs-text-primary);
	line-height: var(--momcs-line-height-tight);
}

.momcs-sync-modal-close-modern {
	padding: var(--momcs-spacing-xs);
	background: none;
	border: none;
	color: var(--momcs-text-secondary);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--momcs-radius-sm);
	transition: all var(--momcs-transition-fast);
}

.momcs-sync-modal-close-modern:hover {
	color: var(--momcs-text-primary);
	background: var(--momcs-bg-tertiary);
}

.momcs-sync-modal-content-modern {
	padding: var(--momcs-spacing-xl);
	overflow-y: auto;
	flex: 1;
}

.momcs-sync-loading-modal-modern {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background: var(--momcs-bg-primary);
	padding: var(--momcs-spacing-2xl);
	border-radius: var(--momcs-radius-lg);
	text-align: center;
	box-shadow: var(--momcs-shadow-xl);
}

.momcs-sync-spinner-modern {
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 3px solid var(--momcs-bg-tertiary);
	border-top: 3px solid var(--momcs-accent-orange);
	border-radius: 50%;
	animation: momcsSpinnerRotate 1s linear infinite;
	margin-bottom: var(--momcs-spacing-lg);
}

@keyframes momcsSpinnerRotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Enhanced Shimmer Loading
   ========================================================================== */

.momcs-shimmer-row td {
	padding: var(--momcs-spacing-md);
}

.momcs-shimmer-row td > div {
	height: 16px;
	border-radius: var(--momcs-radius-sm);
	background: var(--momcs-bg-secondary);
	background-image: linear-gradient(
		to right,
		var(--momcs-bg-secondary) 0%,
		var(--momcs-bg-tertiary) 20%,
		var(--momcs-bg-secondary) 40%,
		var(--momcs-bg-secondary) 100%
	);
	background-repeat: no-repeat;
	background-size: 800px 104px;
	animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
	0% {
		background-position: -468px 0;
	}
	100% {
		background-position: 468px 0;
	}
}

.momcs-shimmer-row td:nth-child(1) > div {
	width: 50px;
}

.momcs-shimmer-row td:nth-child(2) > div {
	width: 200px;
}

.momcs-shimmer-row td:nth-child(3) > div {
	width: 120px;
}

.momcs-shimmer-row td:nth-child(4) > div {
	width: 80px;
}

.momcs-shimmer-row td:nth-child(5) > div {
	width: 60px;
}

/* ==========================================================================
   Audit Log Summary Bar + Product Filter
   ========================================================================== */

/* --- Summary Bar Container --- */
.momcs-audit-summary-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--momcs-spacing-lg);
	padding: var(--momcs-spacing-md) var(--momcs-spacing-lg);
	margin-bottom: var(--momcs-spacing-lg);
	background: var(--momcs-bg-secondary);
	border: 1px solid var(--momcs-border-color);
	border-radius: var(--momcs-radius-lg);
}

/* --- Summary Stats --- */
.momcs-audit-summary-stats {
	display: flex;
	align-items: center;
	gap: var(--momcs-spacing-lg);
}

.momcs-audit-stat {
	display: inline-flex;
	align-items: center;
	gap: var(--momcs-spacing-xs);
	font-size: var(--momcs-font-size-sm);
	color: var(--momcs-text-secondary);
}

.momcs-audit-stat-value {
	font-weight: var(--momcs-font-weight-bold);
	font-size: var(--momcs-font-size-lg);
	color: var(--momcs-text-primary);
}

.momcs-audit-stat-label {
	font-weight: var(--momcs-font-weight-medium);
}

.momcs-audit-stat-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.momcs-audit-stat-success .momcs-audit-stat-dot {
	background: var(--momcs-accent-green);
}

.momcs-audit-stat-success .momcs-audit-stat-value {
	color: var(--momcs-accent-green);
}

.momcs-audit-stat-error .momcs-audit-stat-dot {
	background: var(--momcs-accent-red);
}

.momcs-audit-stat-error .momcs-audit-stat-value {
	color: var(--momcs-accent-red);
}

/* --- Product Filter Area --- */
.momcs-audit-product-filter {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--momcs-spacing-sm);
}

/* --- Active Filter Chip --- */
.momcs-audit-active-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--momcs-spacing-xs);
	padding: var(--momcs-spacing-xs) var(--momcs-spacing-md);
	background: var(--momcs-accent-blue-light);
	color: var(--momcs-accent-blue);
	border: 1px solid var(--momcs-accent-blue);
	border-radius: 20px;
	font-size: var(--momcs-font-size-xs);
	font-weight: var(--momcs-font-weight-medium);
	white-space: nowrap;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.momcs-audit-active-filter-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.momcs-audit-active-filter-clear {
	background: none;
	border: none;
	color: var(--momcs-accent-blue);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0 0 0 2px;
	flex-shrink: 0;
	opacity: 0.7;
	transition: opacity var(--momcs-transition-fast);
}

.momcs-audit-active-filter-clear:hover {
	opacity: 1;
}

/* --- Search Input Wrapper --- */
.momcs-audit-product-search-wrapper {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 var(--momcs-spacing-md);
	background: var(--momcs-bg-primary);
	border-radius: var(--momcs-radius-md);
	box-shadow: var(--momcs-shadow-sm);
	border: 1px solid var(--momcs-border-color-light);
	height: 34px;
	min-width: 180px;
	transition: all var(--momcs-transition-fast);
}

.momcs-audit-product-search-wrapper:focus-within {
	border-color: var(--momcs-accent-orange);
	box-shadow: 0 0 0 3px var(--momcs-accent-orange-light);
}

.momcs-audit-search-icon {
	width: 14px;
	height: 14px;
	color: var(--momcs-text-muted);
	flex-shrink: 0;
}

.momcs-audit-search-input {
	flex: 1;
	height: 22px;
	min-width: 100px;
	padding: 0 2px;
	font-size: var(--momcs-font-size-xs);
	font-weight: var(--momcs-font-weight-medium);
	color: var(--momcs-text-primary);
	background: transparent;
	border: none !important;
	outline: none !important;
	box-sizing: border-box;
}

.momcs-audit-search-input::placeholder {
	color: var(--momcs-text-muted);
	font-size: var(--momcs-font-size-xs);
	font-weight: var(--momcs-font-weight-normal);
}

/* --- Dropdown Panel --- */
.momcs-audit-product-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	width: 320px;
	max-height: 0;
	overflow: hidden;
	background: var(--momcs-bg-primary);
	border: 1px solid var(--momcs-border-color);
	border-radius: var(--momcs-radius-lg);
	box-shadow: var(--momcs-shadow-lg);
	z-index: 10001;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--momcs-transition-fast),
	            visibility var(--momcs-transition-fast),
	            max-height var(--momcs-transition-normal);
}

.momcs-audit-product-dropdown.is-open {
	opacity: 1;
	visibility: visible;
	max-height: 400px;
	overflow: visible;
}

/* Scrollable area for product items */
.momcs-audit-dropdown-scroll {
	max-height: 280px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.momcs-audit-dropdown-scroll::-webkit-scrollbar {
	width: 6px;
}

.momcs-audit-dropdown-scroll::-webkit-scrollbar-track {
	background: var(--momcs-bg-secondary);
}

.momcs-audit-dropdown-scroll::-webkit-scrollbar-thumb {
	background: var(--momcs-border-color-dark);
	border-radius: 6px;
}

/* Individual dropdown items */
.momcs-audit-dropdown-item {
	display: flex;
	align-items: center;
	gap: var(--momcs-spacing-sm);
	padding: var(--momcs-spacing-sm) var(--momcs-spacing-md);
	cursor: pointer;
	font-size: var(--momcs-font-size-sm);
	color: var(--momcs-text-primary);
	transition: background var(--momcs-transition-fast);
	border-bottom: 1px solid var(--momcs-border-color-light);
}

.momcs-audit-dropdown-item:last-child {
	border-bottom: none;
}

.momcs-audit-dropdown-item:hover,
.momcs-audit-dropdown-item.is-focused {
	background: var(--momcs-bg-hover);
}

.momcs-audit-dropdown-item.active {
	background: var(--momcs-accent-orange-light);
	color: var(--momcs-accent-orange);
}

.momcs-audit-dropdown-item-status {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.momcs-audit-dropdown-item-status.success {
	background: var(--momcs-accent-green);
}

.momcs-audit-dropdown-item-status.error {
	background: var(--momcs-accent-red);
}

.momcs-audit-dropdown-item-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: var(--momcs-font-weight-medium);
}

.momcs-audit-dropdown-item-badge {
	flex-shrink: 0;
	font-size: var(--momcs-font-size-xs);
	font-weight: var(--momcs-font-weight-semibold);
	padding: 2px 8px;
	border-radius: 20px;
}

.momcs-audit-dropdown-item-badge.success {
	background: var(--momcs-accent-green-light);
	color: var(--momcs-accent-green);
}

.momcs-audit-dropdown-item-badge.error {
	background: var(--momcs-accent-red-light);
	color: var(--momcs-accent-red);
}

/* "All Products" special item */
.momcs-audit-dropdown-all {
	font-weight: var(--momcs-font-weight-semibold);
	border-bottom: 1px solid var(--momcs-border-color);
	padding: var(--momcs-spacing-md);
}

.momcs-audit-dropdown-item-count {
	font-size: var(--momcs-font-size-xs);
	color: var(--momcs-text-muted);
	font-weight: var(--momcs-font-weight-normal);
}

/* Group header (errors only toggle) */
.momcs-audit-dropdown-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--momcs-spacing-xs) var(--momcs-spacing-md);
	font-size: var(--momcs-font-size-xs);
	color: var(--momcs-text-muted);
	background: var(--momcs-bg-secondary);
	border-bottom: 1px solid var(--momcs-border-color-light);
}

/* Mini toggle for "errors only" inside dropdown */
.momcs-audit-error-toggle {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.momcs-audit-mini-toggle {
	position: relative;
	width: 28px;
	height: 16px;
	background: var(--momcs-border-color-dark);
	border-radius: 16px;
	cursor: pointer;
	transition: background var(--momcs-transition-fast);
}

.momcs-audit-mini-toggle::before {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	left: 2px;
	top: 2px;
	background: white;
	border-radius: 50%;
	transition: transform var(--momcs-transition-fast);
}

.momcs-audit-error-toggle input {
	display: none;
}

.momcs-audit-error-toggle input:checked + .momcs-audit-mini-toggle {
	background: var(--momcs-accent-red);
}

.momcs-audit-error-toggle input:checked + .momcs-audit-mini-toggle::before {
	transform: translateX(12px);
}

/* Empty state */
.momcs-audit-dropdown-empty {
	padding: var(--momcs-spacing-lg);
	text-align: center;
	font-size: var(--momcs-font-size-sm);
	color: var(--momcs-text-muted);
}

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

@media screen and (max-width: 992px) {
	.momcs-queue-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.momcs-pagination-wrapper {
		flex-direction: column;
		gap: var(--momcs-spacing-md);
	}

	.momcs-pagination-nav {
		order: -1;
		width: 100%;
		justify-content: center;
	}

	.momcs-pagination-per-page {
		width: 100%;
		justify-content: center;
	}

	.momcs-pagination-info {
		width: 100%;
		text-align: center;
	}
}

@media screen and (max-width: 768px) {
	.momcs-sync-sub-tabs-modern {
		flex-wrap: wrap;
	}

	.momcs-sync-sub-tab-modern {
		flex: 1;
		min-width: 120px;
		padding: var(--momcs-spacing-sm) var(--momcs-spacing-md);
		font-size: var(--momcs-font-size-sm);
	}

	.momcs-queue-table-modern {
		font-size: var(--momcs-font-size-sm);
	}

	.momcs-queue-table-modern thead th,
	.momcs-queue-table-modern tbody td {
		padding: var(--momcs-spacing-sm) var(--momcs-spacing-md);
	}

	.momcs-sync-modal-modern {
		width: calc(100% - 40px);
		max-height: 90vh;
	}

	.momcs-audit-summary-bar {
		flex-direction: column;
		align-items: stretch;
		gap: var(--momcs-spacing-md);
	}

	.momcs-audit-summary-stats {
		justify-content: space-around;
	}

	.momcs-audit-product-filter {
		flex-direction: column;
		align-items: stretch;
	}

	.momcs-audit-product-search-wrapper {
		min-width: auto;
		width: 100%;
	}

	.momcs-audit-product-dropdown {
		width: 100%;
		right: 0;
		left: 0;
	}

	.momcs-audit-active-filter {
		max-width: 100%;
	}
}

/* =====================================================================
   Audit Left-Nav Sidebar Layout
   ===================================================================== */
.momcs-audit-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.momcs-audit-sidebar {
	width: 220px;
	flex-shrink: 0;
	background: var(--momcs-bg-primary, #fff);
	border: 1px solid var(--momcs-border-secondary, #e5e7eb);
	border-radius: var(--momcs-radius-lg, 12px);
	padding: 12px 0;
	position: sticky;
	top: 32px;
	box-shadow: var(--momcs-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

.momcs-audit-nav-group {
	margin-bottom: 4px;
}

.momcs-audit-nav-group:last-child {
	margin-bottom: 0;
}

.momcs-audit-nav-group + .momcs-audit-nav-group {
	border-top: 1px solid var(--momcs-border-secondary, #e5e7eb);
	padding-top: 4px;
	margin-top: 4px;
}

.momcs-audit-nav-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px 6px;
	font-weight: 600;
	font-size: var(--momcs-font-xs, 11px);
	color: var(--momcs-text-tertiary, #9ca3af);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.momcs-audit-nav-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.momcs-audit-nav-item {
	display: block;
	width: 100%;
	padding: 9px 20px 9px 44px;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	font-size: var(--momcs-font-sm, 13px);
	color: var(--momcs-text-secondary, #6b7280);
	transition: background var(--momcs-transition-fast, 0.15s), color var(--momcs-transition-fast, 0.15s), border-color var(--momcs-transition-fast, 0.15s);
	border-right: 3px solid transparent;
	font-family: inherit;
	line-height: 1.4;
}

.momcs-audit-nav-item:hover {
	background: var(--momcs-bg-secondary, #f8f9fa);
	color: var(--momcs-text-primary, #1f2937);
}

.momcs-audit-nav-item.active {
	color: #ea580c;
	font-weight: 600;
	background: #fff7ed;
	border-right-color: #f97316;
}

.momcs-audit-content {
	flex: 1;
	min-width: 0;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
	.momcs-audit-layout {
		flex-direction: column;
	}

	.momcs-audit-sidebar {
		width: 100%;
		position: static;
		display: flex;
		flex-wrap: wrap;
		padding: 8px;
		gap: 0;
	}

	.momcs-audit-nav-group {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
		margin-bottom: 0;
	}

	.momcs-audit-nav-group + .momcs-audit-nav-group {
		border-top: none;
		border-left: 1px solid var(--momcs-border-secondary, #e5e7eb);
		padding-top: 0;
		padding-left: 8px;
		margin-top: 0;
		margin-left: 8px;
	}

	.momcs-audit-nav-header {
		padding: 6px 12px;
		font-size: 10px;
	}

	.momcs-audit-nav-item {
		padding: 6px 12px;
		width: auto;
		border-right: none;
		border-bottom: 2px solid transparent;
		border-radius: var(--momcs-radius-sm, 6px);
		font-size: 12px;
	}

	.momcs-audit-nav-item.active {
		border-right-color: transparent;
		border-bottom-color: #f97316;
	}
}