$color-text-dark: #1d2327;
$color-text-muted: #475467;
$color-border: #d0d5dd;
$color-border-light: #eaecf0;
$color-bg-light: #f8f9fa;
$color-bg-card: #ffffff;
$color-primary: #3858e9;
$color-primary-hover: #1d3bd1;
$color-primary-light: rgba(56, 88, 233, 0.08);
$color-danger: #d92d20;
$color-danger-border: #fda29b;
$color-danger-bg: #fef3f2;

.order-analytics-setting {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	max-width: 850px;
	margin: 20px 0;
	background: $color-bg-card;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
	padding: 28px;

	.meta-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
		padding-bottom: 18px;
		border-bottom: 1px solid $color-border-light;

		h1 {
			font-size: 20px;
			font-weight: 600;
			color: $color-text-dark;
			margin: 0;
			line-height: 1.4;
			padding: 0;
		}
	}

	.add-row {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background-color: $color-primary;
		color: #ffffff;
		border: none;
		border-radius: 6px;
		padding: 10px 20px;
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
		box-shadow: 0 2px 4px rgba(56, 88, 233, 0.12);

		.add-icon {
			font-weight: 600;
			font-size: 16px;
			line-height: 1;
		}

		&:hover {
			background-color: $color-primary-hover;
			box-shadow: 0 4px 8px rgba(56, 88, 233, 0.22);
			transform: translateY(-1px);
		}

		&:active {
			transform: translateY(0);
			box-shadow: 0 1px 2px rgba(56, 88, 233, 0.12);
		}
	}

	.remove-row {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		cursor: pointer;
		border: 1px solid $color-danger-border;
		background-color: $color-danger-bg;
		color: $color-danger;
		border-radius: 6px;
		transition: all 0.2s ease;
		padding: 0;
		margin: 0;

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

		&:hover {
			background-color: $color-danger;
			border-color: $color-danger;
			color: #ffffff;
		}

		&:active {
			transform: scale(0.95);
		}
	}

	table {
		width: 100%;
		border-collapse: collapse;
		margin: 0;
		border: 1px solid $color-border-light;
		border-radius: 8px;
		overflow: hidden;
	}

	.table-header {
		background-color: $color-bg-light;
		border-bottom: 2px solid $color-border-light;
		user-select: none;

		th {
			padding: 14px 18px;
			font-size: 11px;
			font-weight: 600;
			color: $color-text-muted;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			text-align: left;

			&:last-child {
				text-align: center;
			}
		}
	}

	.metadata-body {
		tr {
			background-color: #ffffff;
			border-bottom: 1px solid $color-border-light;
			transition: background-color 0.15s ease;

			&:last-child {
				border-bottom: none;
			}

			&:hover {
				background-color: #fcfcfd;
			}
		}

		td {
			padding: 14px 18px;
			vertical-align: middle;
			text-align: left;

			&:last-child {
				text-align: center;
			}
		}
	}

	.meta-value,
	.meta-key {
		width: 100%;
		box-sizing: border-box;
		border: 1px solid $color-border;
		border-radius: 6px;
		padding: 8px 12px;
		font-size: 14px;
		line-height: 20px;
		color: #344054;
		background-color: #ffffff;
		box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
		transition: all 0.2s ease;
		margin: 0;
		min-height: 38px;

		&:focus {
			border-color: $color-primary;
			outline: none;
			box-shadow: 0 0 0 3px $color-primary-light;
		}
	}

	select.meta-key {
		appearance: none;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
		background-position: right 12px center;
		background-repeat: no-repeat;
		background-size: 16px;
		padding-right: 36px;
	}
}