/**
 * Product Synchronization CSS
 *
 * Styles for the product synchronization page.
 *
 * @package    MOMCS_Sync
 * @subpackage MOMCS_Sync/assets/css
 */


.momcs-sync-settings-container,
.momcs-sync-products-container {
	margin-bottom: 20px;
	padding: 0;
}

.momcs-sync-settings-header,
.momcs-sync-products-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.momcs-sync-settings-header h2,
.momcs-sync-products-header h2 {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
}

.momcs-sync-settings-content,
.momcs-sync-products-content {
	padding: 0px 15px 0px 0px;
}

/* Toggle switch */
.momcs-sync-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 24px;
	vertical-align: middle;
}

.momcs-sync-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.momcs-sync-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
}

.momcs-sync-slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	transition: .4s;
}

input:checked + .momcs-sync-slider {
	background-color: #ea580c;
}

input:focus + .momcs-sync-slider {
	box-shadow: 0 0 1px #ea580c;
}

input:checked + .momcs-sync-slider:before {
	transform: translateX(16px);
}

.momcs-sync-slider.round {
	border-radius: 24px;
}

.momcs-sync-slider.round:before {
	border-radius: 50%;
}

/* Spinner */
.momcs-sync-spinner {
	display: inline-block;
	visibility: hidden;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin: 0 10px;
	border: 2px solid #f3f3f3;
	border-top: 2px solid #ea580c;
	border-radius: 50%;
	animation: momcs-sync-spin 1s linear infinite;
}

.momcs-sync-spinner.is-active {
	visibility: visible;
}

/* Loading modal spinner - always visible and larger */
.momcs-sync-loading-modal .momcs-sync-spinner {
	display: inline-block !important;
	width: 40px !important;
	height: 40px !important;
	border: 3px solid #f3f3f3 !important;
	border-top: 3px solid #ea580c !important;
	border-radius: 50% !important;
	animation: momcsSpinnerRotate 1s linear infinite !important;
	margin: 0 auto 15px !important;
	visibility: visible !important;
}

/* Add the working animation from sync-queue */
@keyframes momcsSpinnerRotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Spinner animation */
@keyframes momcs-sync-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Messages */
.momcs-sync-message {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	font-weight: 500;
}

.momcs-sync-message.success {
	color: #46b450;
}

.momcs-sync-message.error {
	color: #dc3232;
}

/* Product table */
.momcs-sync-products-container .column-image {
	width: 60px;
}

.momcs-sync-products-container .column-sku,
.momcs-sync-products-container .column-price,
.momcs-sync-products-container .column-stock,
.momcs-sync-products-container .column-sync-status {
	width: 100px;
}

.momcs-sync-products-container .column-actions {
	width: 150px;
}

.momcs-sync-stock-status {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 16px;
	font-size: 12px;
	font-weight: 500;
}

.momcs-sync-stock-status.in-stock {
	background-color: #e7f5ea;
	color: #1e8a38;
}

.momcs-sync-stock-status.out-of-stock {
	background-color: #fbeaea;
	color: #b32d2e;
}

.momcs-sync-status {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 500;
	position: relative;
}

.momcs-sync-status.synced {
	background-color: #e7f5ea;
	color: #1e8a38;
	cursor: help;
}

.momcs-sync-status.not-synced {
	background-color: #fbeaea;
	color: #b32d2e;
}

/* Tooltip */
.momcs-sync-tooltip {
	visibility: hidden;
	width: 250px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -125px;
	opacity: 0;
	transition: opacity 0.3s;
	font-weight: normal;
	font-size: 11px;
}

.momcs-sync-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}

.momcs-sync-status:hover .momcs-sync-tooltip {
	visibility: visible;
	opacity: 1;
}

/* Bulk actions */
.momcs-sync-bulk-actions {
	display: flex;
	align-items: center;
}

/* Keep pagination inline with bulk actions when placed in header */
.momcs-sync-products-header .momcs-sync-pagination.top {
	margin: 0;
}

.momcs-sync-products-header .tablenav-pages {
	float: none;
}

/* Responsive adjustments */
@media screen and (max-width: 782px) {
	.momcs-sync-products-container .column-image,
	.momcs-sync-products-container .column-sku,
	.momcs-sync-products-container .column-price,
	.momcs-sync-products-container .column-stock,
	.momcs-sync-products-container .column-sync-status,
	.momcs-sync-products-container .column-actions {
		width: auto;
	}

	.momcs-sync-products-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.momcs-sync-bulk-actions {
		margin-top: 10px;
	}
}

/* Channel Selection Modal */
.momcs-sync-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 160000;
}

.momcs-sync-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	z-index: 160001;
	width: 90%;
	max-width: 500px;
}

/* Avoid styling the modal header title; only style section titles inside content */
.momcs-sync-modal .momcs-issues-content h2 {
	margin: 0 0 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

.momcs-sync-modal-body {
	margin-bottom: 20px;
}

#momcs-channel-select {
	width: 100%;
	margin-bottom: 15px;
}

.momcs-sync-selected-count {
	color: #666;
	margin: 10px 0;
}

.momcs-sync-modal-actions button {
	margin-left: 10px !important;
}

/* Status Chips */
.momcs-sync-status-chip {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 12px;
	line-height: 1;
	background: #e0e0e0;
}

.momcs-sync-status-chip.synced {
	background: #e8f5e9;
	color: #2e7d32;
}

.momcs-sync-status-chip.failed {
	background: #ffebee;
	color: #c62828;
}

/* New status chip colours */
.momcs-sync-status-chip.processing {
	background: #fff8e1;
	color: #996800;
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
}
.momcs-sync-status-chip.discoverable  { background:#ffe8d1; color:#d48f00; }

/* Column widths */
.column-issues {
	width: 120px;
	text-align: center;
}

/* Issues button styling - chip format */
.momcs-amz-issues-btn {
	display: inline-flex !important;
	align-items: center !important;
	padding: 6px 10px !important;
	border-radius: 12px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	border: none !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	background-color: #fce8e6 !important;
	color: #d93025 !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.momcs-amz-issues-btn:hover {
	background-color: #f8d7da !important;
	color: #721c24 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 2px 4px rgba(217, 48, 37, 0.2) !important;
}

.momcs-amz-issues-btn:focus {
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(217, 48, 37, 0.3) !important;
}

.momcs-amz-issues-btn:active {
	transform: translateY(0) !important;
	box-shadow: none !important;
}

/* Issues modal specific styles */
.momcs-issues-content {
	padding: 20px 0;
}

.momcs-no-issues {
	text-align: center;
	padding: 40px 20px;
}

.momcs-issues-section {
	margin-bottom: 30px;
}

.momcs-issues-section:last-child {
	margin-bottom: 0;
}

.momcs-issues-section-header {
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #e5e7eb;
}

.momcs-issue-details {
	line-height: 1.5;
}

.momcs-issue-code {
	margin-top: 8px;
	font-size: 12px;
	color: #666;
}

.momcs-issue-code code {
	background: #f1f3f4;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: monospace;
	font-size: 11px;
}

/* Override timeline styling for issues */
.momcs-issues-content .momcs-sync-timeline {
	margin-left: 12px;
}

.momcs-issues-content .momcs-sync-node {
	margin-bottom: 12px;
	padding: 12px 16px;
}

.momcs-issues-content .momcs-sync-node:hover {
	transform: translateX(2px);
	transition: transform 0.2s ease;
}

/* Tooltips */
.momcs-sync-tooltip {
	display: none;
	position: absolute;
	background: #333;
	color: #fff;
	padding: 8px;
	border-radius: 4px;
	font-size: 12px;
	z-index: 100;
	max-width: 200px;
	white-space: normal;
}

.momcs-sync-status:hover .momcs-sync-tooltip {
	display: block;
}

/* ========================
 * Logger / Status Console
 * ======================*/
.momcs-sync-logger {
	margin-top: 20px;
	border: 1px solid #ccd0d4;
	background-color: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	border-radius: 4px;
	overflow: hidden;
}

.momcs-sync-logger-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	background-color: #f8f9fa;
	border-bottom: 1px solid #ccd0d4;
}

.momcs-sync-logger-header h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.momcs-sync-logger-actions {
	display: flex;
	gap: 10px;
}

.momcs-sync-logger-content {
	max-height: 300px;
	overflow-y: auto;
	padding: 10px 15px;
	background-color: #f8f9fa;
	font-family: monospace;
	font-size: 12px;
}

.momcs-sync-logger-content .log-entry {
	margin-bottom: 5px;
	padding: 5px;
	border-radius: 3px;
}

.momcs-sync-logger-content .log-entry.info {
	background-color: #e8f4fd;
	border-left: 3px solid #72aee6;
}

.momcs-sync-logger-content .log-entry.success {
	background-color: #ecf7ed;
	border-left: 3px solid #46b450;
}

.momcs-sync-logger-content .log-entry.warning {
	background-color: #fff8e5;
	border-left: 3px solid #ffb900;
}

.momcs-sync-logger-content .log-entry.error {
	background-color: #fbeaea;
	border-left: 3px solid #dc3232;
}

/* Ripple animation */
@keyframes momcs-sync-ripple {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.8;
	}
	100% {
		transform: translate(-50%, -50%) scale(2);
		opacity: 0;
	}
}

/* Action required blinking dot */
.momcs-sync-action-required {
	margin-top: 4px;
}

.momcs-sync-action-required .action-required-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-size: 11px;
	line-height: 1.2;
	color: #ffb900; /* yellow */
	font-weight: 600;
}

.momcs-sync-action-required .action-required-dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffb900; /* yellow */
	margin-right: 4px;
}

.momcs-sync-action-required .action-required-dot::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px solid #ffb900;
	transform: translate(-50%, -50%) scale(1);
	animation: momcs-sync-ripple 1.2s infinite ease-out;
	box-sizing: border-box;
}

/* Refresh Button Styling */
.momcs-amz-refresh-status-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: 8px;
	border: none;
	background: transparent;
	border-radius: 4px;
	cursor: pointer;
	color: #666;
	transition: all 0.2s ease;
}

.momcs-amz-refresh-status-btn:hover {
	background: #f0f0f0;
	color: #ea580c;
	transform: scale(1.05);
}

.momcs-amz-refresh-status-btn:active {
	transform: scale(0.95);
}

.momcs-amz-refresh-status-btn.is-loading {
	animation: momcs-refresh-spin 1s linear infinite;
	color: #ea580c;
}

@keyframes momcs-refresh-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Shimmer Effect for Status and Issues columns */
.momcs-shimmer {
	background: linear-gradient(90deg,
		#f0f0f0 25%,
		#e0e0e0 50%,
		#f0f0f0 75%
	);
	background-size: 200% 100%;
	animation: momcs-shimmer-loading 2s infinite;
	border-radius: 4px;
	height: 24px;
}

@keyframes momcs-shimmer-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.column-status.momcs-shimmer-active .momcs-marketplace-chip,
.column-status.momcs-shimmer-active .momcs-marketplace-chips,
.column-issues.momcs-shimmer-active .momcs-issues-btn,
.column-issues.momcs-shimmer-active .momcs-amz-issues-btn {
	opacity: 0;
}

.column-status.momcs-shimmer-active::after,
.column-issues.momcs-shimmer-active::after {
	content: '';
	display: block;
	width: 80px;
	height: 24px;
	background: linear-gradient(90deg,
		#f0f0f0 25%,
		#e0e0e0 50%,
		#f0f0f0 75%
	);
	background-size: 200% 100%;
	animation: momcs-shimmer-loading 2s infinite;
	border-radius: 12px;
	margin: auto;
}

.column-issues.momcs-shimmer-active::after {
	width: 100px;
}

/* Updated row highlight animation */
tr.momcs-updated-row {
	background-color: rgba(70, 180, 80, 0.1);
	transition: background-color 0.3s ease;
}

/* ============================================
   Premium Tooltip for Disabled Buttons
   ============================================ */
.momcs-premium-tooltip-wrapper {
	position: relative;
	display: inline-block;
}

.momcs-premium-tooltip {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
	color: #fff;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	white-space: normal;
	width: 280px;
	max-width: 320px;
	z-index: 10000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	transition: opacity 0.3s ease, visibility 0.3s ease;
	pointer-events: none;
}

/* Arrow pointing down */
.momcs-premium-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 8px;
	border-style: solid;
	border-color: #2c5282 transparent transparent transparent;
}

/* Show tooltip on hover */
.momcs-premium-tooltip-wrapper:hover .momcs-premium-tooltip {
	visibility: visible;
	opacity: 1;
}

/* Disabled button within wrapper */
.momcs-premium-tooltip-wrapper button:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}