/**
 * Content Sync Styles
 */

// Sync Modal
.rsl-ie-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
}

.rsl-ie-modal-content {
	background: #fff;
	border-radius: 8px;
	max-width: 600px;
	width: 90%;
	max-height: 90vh;
	overflow: auto;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

	&.rsl-ie-modal-large {
		max-width: 900px;
	}
}

.rsl-ie-modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: space-between;

	h2 {
		margin: 0;
		font-size: 20px;
		font-weight: 600;
	}

	.rsl-ie-modal-close {
		background: none;
		border: none;
		font-size: 28px;
		line-height: 1;
		color: #999;
		cursor: pointer;
		padding: 0;
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4px;
		transition: all 0.2s;

		&:hover {
			color: #333;
			background: #f0f0f0;
		}
	}
}

.rsl-ie-modal-body {
	padding: 24px;
}

// Mapping Modal Specific
.rsl-ie-mapping-info {
	margin-bottom: 20px;

	p {
		margin: 0 0 12px 0;
		color: #666;
	}
}

.rsl-ie-mapping-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;

	.button {
		display: inline-flex;
		align-items: center;
		gap: 6px;

		.dashicons {
			margin-top: 0;
		}
	}
}

.rsl-ie-loading-state {
	text-align: center;
	padding: 40px 20px;

	.rsl-ie-spinner {
		width: 40px;
		height: 40px;
		margin: 0 auto 16px;
		border: 4px solid #f3f3f3;
		border-top: 4px solid #2271b1;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	p {
		margin: 0;
		color: #666;
	}
}

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

// Mapping Table
.rsl-ie-mapping-table-container {
	margin: 20px 0;
	overflow-x: auto;
}

.rsl-ie-mapping-table {
	margin: 0;

	th {
		background: #f0f0f0;
		font-weight: 600;
		padding: 12px;

		&.rsl-ie-local-post {
			width: 40%;
		}

		&.rsl-ie-sync-arrow {
			width: 60px;
			text-align: center;
		}

		&.rsl-ie-remote-post {
			width: calc(60% - 60px);
		}
	}

	td {
		padding: 12px;
		vertical-align: middle;

		&.rsl-ie-sync-arrow {
			text-align: center;
			color: #2271b1;
			font-size: 20px;
		}
	}
}

.rsl-ie-local-post-info {
	h4 {
		margin: 0 0 4px 0;
		font-size: 14px;
		font-weight: 600;
	}

	.rsl-ie-post-meta {
		font-size: 12px;
		color: #666;

		.rsl-ie-post-type {
			display: inline-block;
			padding: 2px 6px;
			background: #e5e5e5;
			border-radius: 3px;
			margin-right: 8px;
		}

		.rsl-ie-post-id {
			color: #999;
		}
	}
}

.rsl-ie-remote-select-wrapper {
	position: relative;

	select {
		width: 100%;
		padding: 8px;
		border: 1px solid #ddd;
		border-radius: 4px;
		font-size: 14px;

		&:focus {
			border-color: #2271b1;
			outline: none;
			box-shadow: 0 0 0 1px #2271b1;
		}

		option {
			&.rsl-ie-option-new {
				font-weight: 600;
				color: #00a32a;
			}

			&.rsl-ie-option-update {
				color: #2271b1;
			}
		}
	}

	&.rsl-ie-action-new select {
		border-color: #00a32a;
	}

	&.rsl-ie-action-update select {
		border-color: #2271b1;
	}
}

// Mapping Footer
.rsl-ie-mapping-footer {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #ddd;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

// Sync Direction Buttons
.rsl-ie-sync-direction {
	display: flex;
	gap: 12px;
	margin-top: 20px;

	.button {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 10px 16px;
		height: auto;

		.dashicons {
			margin-top: 0;
		}

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}
}

// Progress Bar
.rsl-ie-sync-progress {
	margin-top: 20px;
}

.rsl-ie-progress-bar {
	height: 8px;
	background: #f0f0f0;
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 12px;
	margin-top: 12px;
}

.rsl-ie-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #2271b1 0%, #135e96 100%);
	width: 0;
	transition: width 0.3s ease;
	position: relative;
	overflow: hidden;

	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.3) 50%,
			rgba(255, 255, 255, 0) 100%
		);
		animation: shimmer 2s infinite;
	}
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

.rsl-ie-progress-text {
	margin: 0;
	text-align: center;
	color: #666;
	font-size: 14px;
}

// Sync Result
.rsl-ie-sync-result {
	margin-top: 20px;
	padding: 16px;
	border-radius: 4px;

	&.rsl-ie-result-success {
		background: #d4edda;
		border: 1px solid #c3e6cb;
		color: #155724;
	}

	&.rsl-ie-result-error {
		background: #f8d7da;
		border: 1px solid #f5c6cb;
		color: #721c24;
	}

	h4 {
		margin: 0 0 8px 0;
		font-size: 14px;
		font-weight: 600;
	}

	p {
		margin: 0;
		font-size: 14px;
	}
}

// Browse Remote Posts Modal (Library Style)
.rsl-ie-browse-library-modal {
	.rsl-ie-modal-content {
		max-width: 1200px;
		height: 90vh;
	}
}

.rsl-ie-browse-search-bar {
	padding: 15px 24px;
	border-bottom: 1px solid #ddd;

	input {
		width: 100%;
		padding: 10px 15px;
		font-size: 14px;
		border: 1px solid #c3c4c7;
		border-radius: 4px;

		&:focus {
			border-color: #2271b1;
			outline: none;
			box-shadow: 0 0 0 1px #2271b1;
		}
	}
}

.rsl-ie-browse-body {
	display: flex;
	padding: 0;
	overflow: hidden;
	flex: 1;
}

.rsl-ie-browse-sidebar {
	width: 250px;
	padding: 20px;
	border-right: 1px solid #ddd;
	overflow-y: auto;

	h3 {
		margin: 0 0 15px;
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		color: #666;
	}

	h4 {
		margin: 15px 0 10px;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		color: #999;
	}
}

.rsl-ie-filter-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.rsl-ie-filter-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 5px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
	font-size: 13px;

	.dashicons {
		font-size: 20px;
		color: #666;
		flex-shrink: 0;
	}

	.rsl-ie-filter-count {
		display: inline-block;
		min-width: 24px;
		padding: 2px 6px;
		background: #f0f0f1;
		border-radius: 10px;
		font-size: 11px;
		font-weight: 600;
		text-align: center;
		color: #666;
		margin-left: auto;
	}

	&:hover {
		background: #f6f7f7;

		.dashicons {
			color: #2271b1;
		}
	}

	&.active {
		background: #e5f1fc;
		color: #2271b1;

		.dashicons {
			color: #2271b1;
		}

		.rsl-ie-filter-count {
			background: #2271b1;
			color: #fff;
		}
	}
}

.rsl-ie-browse-selection-info {
	padding: 15px 12px;
	background: #f6f7f7;
	border-radius: 4px;
	font-size: 13px;
	margin-top: 20px;

	strong {
		display: block;
		margin-bottom: 5px;
		color: #666;
	}

	span {
		font-size: 18px;
		font-weight: 600;
		color: #2271b1;
	}
}

.rsl-ie-browse-main {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.rsl-ie-loading-posts {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 60px 20px;
	color: #666;

	.spinner {
		margin: 0;
	}

	p {
		margin: 0;
		font-size: 14px;
		text-align: center;
	}
}

.rsl-ie-posts-tree {
	flex: 1;
}

.rsl-ie-post-wrapper {
	margin-bottom: 8px;

	&:last-child {
		margin-bottom: 0;
	}
}

.rsl-ie-post-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-bottom: 0;
	background: #fff;
	transition: all 0.2s;

	&:hover {
		border-color: #2271b1;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	&.selected {
		background: #f0f6fc;
		border-color: #2271b1;
	}

	&.has-children {
		margin-bottom: 0;
		border-bottom: none;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.rsl-ie-post-toggle {
		flex-shrink: 0;
		background: none;
		border: none;
		padding: 4px;
		cursor: pointer;
		color: #666;
		transition: transform 0.2s;

		.dashicons {
			font-size: 20px;
		}

		&.expanded {
			transform: rotate(90deg);
		}

		&:hover {
			color: #2271b1;
		}
	}

	.rsl-ie-post-checkbox {
		flex-shrink: 0;
		margin: 0;
		cursor: pointer;
	}

	.rsl-ie-post-icon {
		flex-shrink: 0;
		color: #666;

		.dashicons {
			font-size: 20px;
		}
	}

	.rsl-ie-post-info {
		flex: 1;
		min-width: 0;
	}

	.rsl-ie-post-title {
		font-weight: 500;
		color: #1e293b;
		margin: 0 0 4px;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rsl-ie-post-meta {
		display: flex;
		gap: 15px;
		font-size: 12px;
		color: #666;

		.rsl-ie-post-status {
			text-transform: capitalize;

			&.publish {
				color: #00a32a;
			}

			&.draft {
				color: #dba617;
			}

			&.pending {
				color: #d63638;
			}
		}
	}
}

.rsl-ie-post-children {
	margin: 0 0 0 30px;
	padding-left: 20px;
	border-left: 2px solid #e0e0e0;
	background: #fafafa;
	padding-top: 8px;
	padding-bottom: 8px;

	&:empty {
		display: none;
	}

	.rsl-ie-post-wrapper {
		margin-bottom: 8px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.rsl-ie-post-item {
		margin-left: 0;
		background: #fff;
	}
}

.rsl-ie-browse-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	padding: 20px;
	margin-top: auto;
	border-top: 1px solid #ddd;

	.button {
		display: inline-flex;
		align-items: center;
		gap: 5px;

		.dashicons {
			font-size: 16px;
		}
	}

	.rsl-ie-pagination-info {
		font-size: 13px;
		color: #666;
	}
}

.rsl-ie-browse-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 20px 24px;
	border-top: 1px solid #ddd;
}

// Browse Section Styles
.rsl-ie-browse-section {
	margin-top: 30px;
}

.rsl-ie-sync-separator {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 25px 0;
	position: relative;

	&::before,
	&::after {
		content: "";
		flex: 1;
		border-bottom: 1px solid #ddd;
	}

	span {
		padding: 0 15px;
		color: #666;
		font-size: 13px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		background: #fff;
		position: relative;
	}
}

.rsl-ie-browse-remote {
	text-align: center;
	padding: 20px;
	background: #f8f9fa;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	transition: all 0.2s ease;

	&:hover {
		background: #f0f1f2;
		border-color: #2271b1;
	}

	#rsl-ie-browse-remote-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 24px;
		font-size: 14px;
		font-weight: 500;
		height: auto;
		border-radius: 4px;
		transition: all 0.2s ease;

		&:not(:disabled) {
			background: #2271b1;
			border-color: #2271b1;
			color: #fff;

			&:hover {
				background: #135e96;
				border-color: #135e96;
				transform: translateY(-1px);
				box-shadow: 0 2px 8px rgba(34, 113, 177, 0.3);
			}

			&:active {
				transform: translateY(0);
			}
		}

		.dashicons {
			font-size: 18px;
			width: 18px;
			height: 18px;
			margin: 0;
		}
	}

	.description {
		margin: 12px 0 0 0;
		color: #646970;
		font-size: 13px;
	}
}

// Select2 Custom Styles for Mapping Modal
.rsl-ie-mapping-modal {
	.select2-container {
		width: 100% !important;
	}

	.select2-container--default .select2-selection--single {
		height: 40px;
		border-color: #8c8f94;
		border-radius: 4px;
		padding: 0 12px;
		display: flex;
		align-items: center;

		.select2-selection__rendered {
			line-height: 40px;
			padding: 0;
			color: #1d2327;
		}

		.select2-selection__arrow {
			height: 40px;
			right: 8px;
		}

		&:hover {
			border-color: #2271b1;
		}

		&:focus {
			border-color: #2271b1;
			box-shadow: 0 0 0 1px #2271b1;
			outline: 2px solid transparent;
		}
	}

	.select2-container--default.select2-container--open
		.select2-selection--single {
		border-color: #2271b1;
	}

	.select2-dropdown {
		border-color: #8c8f94;
		border-radius: 4px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		z-index: 999999;
	}

	.select2-search--dropdown {
		padding: 8px;

		.select2-search__field {
			border: 1px solid #8c8f94;
			border-radius: 4px;
			padding: 8px 12px;
			font-size: 14px;

			&:focus {
				border-color: #2271b1;
				outline: none;
				box-shadow: 0 0 0 1px #2271b1;
			}
		}
	}

	.select2-results__option {
		padding: 10px 12px;
		font-size: 14px;
		line-height: 1.4;

		&[aria-selected="true"] {
			background-color: #f0f6fc;
			color: #1d2327;
		}

		&--highlighted[aria-selected] {
			background-color: #2271b1;
			color: #fff;
		}
	}

	.select2-results__option--loading,
	.select2-results__message {
		padding: 10px 12px;
		color: #646970;
		font-size: 14px;
	}

	.select2-container--default .select2-results__option[aria-disabled="true"] {
		color: #a7aaad;
		cursor: not-allowed;
	}
}

// Fix Select2 z-index to appear above modal
.rsl-ie-mapping-modal {
	.select2-container {
		z-index: 100001 !important;
	}
}

// Select2 dropdown should appear above modal
.select2-container--open {
	z-index: 100002 !important;
}

.select2-dropdown {
	z-index: 100002 !important;
}
