/**
 * Jobs Log Styles
 */

.rsl-ie-jobs-log {
	background: #fff;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	padding: 20px;
	margin-top: 20px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);

	.rsl-ie-jobs-filters {
		display: grid;
		grid-template-columns: auto auto auto 1fr;
		align-items: center;
		gap: 16px;
		margin-bottom: 20px;
		padding: 16px 20px;
		background: #f9f9f9;
		border: 1px solid #e5e5e5;
		border-radius: 4px;

		.rsl-ie-filter-group {
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			gap: 10px;
			min-width: 0;

			label {
				margin: 0;
				font-weight: 600;
				font-size: 13px;
				color: #1d2327;
				white-space: nowrap;
			}

			select {
				min-width: 160px;
				height: 36px;
				padding: 4px 8px;
				border: 1px solid #8c8f94;
				border-radius: 4px;
				font-size: 14px;

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

		// Buttons container
		.rsl-ie-filter-buttons {
			display: flex;
			gap: 8px;
			justify-self: end;
		}

		.button {
			height: 36px;
			padding: 0 16px;
			font-size: 13px;
			line-height: 34px;
			white-space: nowrap;

			&.rsl-ie-filter-apply {
				background: #2271b1;
				border-color: #2271b1;
				color: #fff;

				&:hover {
					background: #135e96;
					border-color: #135e96;
				}
			}
		}
	}

	// Responsive: stack on smaller screens
	@media (max-width: 1200px) {
		.rsl-ie-jobs-filters {
			grid-template-columns: 1fr;
			gap: 12px;

			.rsl-ie-filter-group {
				grid-template-columns: 120px 1fr;
			}
		}
	}

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

		.spinner {
			float: none;
			margin: 0 auto;
		}

		p {
			margin-top: 10px;
			color: #666;
		}
	}

	.rsl-ie-jobs-table-wrapper {
		overflow-x: auto;
		margin: 0 -20px;
		padding: 0 20px;

		.rsl-ie-jobs-table {
			width: 100%;
			border-collapse: collapse;
			table-layout: auto;

			th,
			td {
				padding: 12px;
				text-align: left;
				vertical-align: middle;
				white-space: nowrap;
			}

			thead th {
				font-weight: 600;
				font-size: 14px;
				color: #1d2327;
				background: #f6f7f7;
				border-bottom: 2px solid #c3c4c7;
				position: sticky;
				top: 0;
				z-index: 10;
			}

			tbody tr {
				border-bottom: 1px solid #f0f0f1;
				transition: background-color 0.15s ease;

				&:hover {
					background: #f6f7f7;
				}
			}

			.column-id {
				width: 60px;
				font-weight: 600;
				color: #2271b1;
			}

			.column-type {
				width: 110px;
			}

			.column-data-type {
				width: 130px;
				font-size: 13px;
			}

			.column-status {
				width: 110px;
			}

			.column-progress {
				width: 180px;
			}

			.column-items {
				width: 120px;
			}

			.column-created,
			.column-elapsed {
				width: 150px;
				font-size: 13px;
				color: #646970;
			}

			.column-actions {
				width: 220px;
			}

			.job-type-badge,
			.job-status-badge {
				display: inline-block;
				padding: 5px 12px;
				font-size: 11px;
				font-weight: 700;
				border-radius: 12px;
				text-transform: uppercase;
				letter-spacing: 0.5px;
				line-height: 1;
			}

			.job-type-import {
				background: #dbeafe;
				color: #1e40af;
				border: 1px solid #bfdbfe;
			}

			.job-type-export {
				background: #d1fae5;
				color: #065f46;
				border: 1px solid #a7f3d0;
			}

			.job-type-media_sync {
				background: #fef3c7;
				color: #92400e;
				border: 1px solid #fde68a;
			}

			.job-status-pending {
				background: #f3f4f6;
				color: #4b5563;
				border: 1px solid #e5e7eb;
			}

			.job-status-processing {
				background: #dbeafe;
				color: #1e40af;
				border: 1px solid #93c5fd;
				animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
			}

			@keyframes pulse {
				0%,
				100% {
					opacity: 1;
				}
				50% {
					opacity: 0.7;
				}
			}

			.job-status-completed {
				background: #d1fae5;
				color: #065f46;
				border: 1px solid #6ee7b7;
			}

			.job-status-failed {
				background: #fee2e2;
				color: #991b1b;
				border: 1px solid #fecaca;
			}

			.job-status-paused {
				background: #fef3c7;
				color: #92400e;
				border: 1px solid #fde68a;
			}

			.job-status-cancelled {
				background: #f3f4f6;
				color: #6b7280;
				border: 1px solid #d1d5db;
			}

			.progress-bar-wrapper {
				display: flex;
				align-items: center;
				gap: 10px;

				.progress-bar {
					flex: 1;
					height: 24px;
					background: #f3f4f6;
					border-radius: 12px;
					overflow: hidden;
					border: 1px solid #e5e7eb;
					box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);

					.progress-bar-fill {
						height: 100%;
						background: linear-gradient(
							90deg,
							#2563eb 0%,
							#3b82f6 50%,
							#60a5fa 100%
						);
						transition: width 0.3s ease;
						position: relative;

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

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

				.progress-text {
					font-size: 13px;
					font-weight: 700;
					color: #2563eb;
					min-width: 50px;
					text-align: right;
				}
			}

			.items-info {
				font-size: 13px;
				line-height: 1.4;

				.failed-count {
					color: #dc2626;
					font-size: 12px;
					margin-top: 4px;
					font-weight: 600;
				}
			}

			.job-actions {
				display: flex;
				gap: 6px;

				.button-small {
					padding: 6px 10px;
					height: 32px;
					line-height: 1;
					min-height: 0;
					border: 1px solid #c3c4c7;
					background: #fff;
					color: #2271b1;
					border-radius: 4px;
					cursor: pointer;
					transition: all 0.15s ease;

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

					&:hover {
						background: #2271b1;
						border-color: #2271b1;
						color: #fff;
						transform: translateY(-1px);
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
					}

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

				.job-action-delete:hover {
					background: #dc2626;
					border-color: #dc2626;
					color: #fff;
				}

				.job-action-resume:hover {
					background: #059669;
					border-color: #059669;
				}

				.job-action-restart:hover {
					background: #d97706;
					border-color: #d97706;
				}

				.job-action-retry:hover {
					background: #7c3aed;
					border-color: #7c3aed;
					color: #fff;
				}
			}

			.no-items td {
				text-align: center;
				padding: 40px 20px;
				color: #666;
			}
		}
	}

	.rsl-ie-jobs-pagination {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #e5e7eb;

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

		.pagination-links {
			display: flex;
			align-items: center;
			gap: 8px;

			.button {
				padding: 4px 8px;
				min-width: 32px;
				justify-content: center;

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

			.current-page,
			.total-pages {
				font-weight: 600;
			}
		}
	}
}

/**
 * Job Details Modal
 */
.rsl-ie-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;

	.rsl-ie-modal-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
	}

	.rsl-ie-modal-content {
		position: relative;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
		max-width: 800px;
		max-height: 90vh;
		width: 90%;
		display: flex;
		flex-direction: column;

		&.rsl-ie-modal-small {
			max-width: 500px;
		}
	}

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

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

		.rsl-ie-modal-close {
			background: none;
			border: none;
			font-size: 24px;
			line-height: 1;
			cursor: pointer;
			padding: 0;
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;

			&:hover {
				background: #f3f4f6;
			}
		}
	}

	.rsl-ie-modal-body {
		padding: 24px;
		overflow-y: auto;
		flex: 1;

		.job-details {
			.form-table {
				th {
					width: 150px;
					font-weight: 600;
				}
			}

			.job-parameters {
				background: #f6f7f7;
				padding: 15px;
				border-radius: 4px;
				overflow-x: auto;
				font-size: 13px;
			}

			h3 {
				margin-top: 24px;
				margin-bottom: 12px;
			}
		}

		p.description {
			color: #666;
			font-style: italic;
			margin-top: 10px;
		}
	}

	.rsl-ie-modal-footer {
		padding: 16px 24px;
		border-top: 1px solid #e5e7eb;
		display: flex;
		justify-content: flex-end;
		gap: 10px;
	}
}
