/**
 * WP Data Optimizer — Migration Wizard styling.
 *
 * Consumes the Morandi design system tokens (var(--color-*), var(--space-*),
 * var(--radius-*), var(--shadow-*), var(--ease-default), var(--duration-normal),
 * var(--font-family-display), var(--font-family-body)).
 *
 * @since 2.8.0
 */

.wpdo-migration-wizard {
	max-width: 1100px;
	font-family: var(--font-family-body, system-ui);
	color: var(--color-ink, #2c2618);
}

.wpdo-mw-header h2 {
	font-family: var(--font-family-display, serif);
	font-size: 1.6rem;
	margin-bottom: var(--space-2, 8px);
}

.wpdo-mw-panel {
	background: var(--color-surface-card, #fbf7f0);
	border: 1px solid var(--color-border-soft, #e5dccd);
	border-radius: var(--radius-md, 12px);
	padding: var(--space-6, 24px);
	margin-bottom: var(--space-5, 20px);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(60, 40, 20, 0.06));
}

.wpdo-mw-panel h3 {
	margin-top: 0;
	font-family: var(--font-family-display, serif);
}

/* ── Pre-flight metrics grid ─────────────────────────────────── */
.wpdo-mw-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-3, 12px);
	margin-bottom: var(--space-4, 16px);
}

.wpdo-mw-metric {
	background: var(--color-surface, #fff);
	border-radius: var(--radius-sm, 8px);
	padding: var(--space-3, 12px) var(--space-4, 16px);
	border: 1px solid var(--color-border-soft, #e5dccd);
}

.wpdo-mw-metric-primary {
	background: var(--color-accent-soft, #f4e9d4);
	border-color: var(--color-accent, #c9a55a);
}

.wpdo-mw-metric-label {
	display: block;
	font-size: 0.78rem;
	color: var(--color-ink-soft, #6b5d44);
	margin-bottom: var(--space-1, 4px);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wpdo-mw-metric-value {
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
	font-family: var(--font-family-display, serif);
}

.wpdo-mw-mode {
	font-size: 0.95rem;
	font-family: var(--font-family-body, monospace);
	padding: var(--space-1, 4px) var(--space-2, 8px);
	border-radius: var(--radius-pill, 999px);
}

.wpdo-mw-mode-aeav_only   { background: #d8efd8; color: #2c5a2c; }
.wpdo-mw-mode-shadow_read { background: #fff3cd; color: #7c5e1e; }
.wpdo-mw-mode-dual_write  { background: #d8e4f0; color: #2c4a6a; }
.wpdo-mw-mode-disabled    { background: #eaeaea; color: #555; }

.wpdo-mw-zero { color: var(--color-ink-soft, #aaa); }

.wpdo-mw-groups summary {
	cursor: pointer;
	margin-bottom: var(--space-2, 8px);
	color: var(--color-ink-soft, #6b5d44);
}

.wpdo-mw-groups table {
	margin-top: var(--space-2, 8px);
}

/* ── Run panel ───────────────────────────────────────────────── */
.wpdo-mw-nothing-todo {
	text-align: center;
	padding: var(--space-8, 32px);
	color: var(--color-ink-soft, #6b5d44);
}

.wpdo-mw-nothing-todo h3 {
	font-size: 1.4rem;
	margin-bottom: var(--space-3, 12px);
}

.wpdo-mw-estimate {
	background: var(--color-surface, #fff);
	border-left: 3px solid var(--color-accent, #c9a55a);
	padding: var(--space-3, 12px) var(--space-4, 16px);
	margin: var(--space-4, 16px) 0;
	border-radius: var(--radius-sm, 8px);
}

.wpdo-mw-options {
	border: 1px solid var(--color-border-soft, #e5dccd);
	border-radius: var(--radius-sm, 8px);
	padding: var(--space-4, 16px);
	margin: var(--space-4, 16px) 0;
}

.wpdo-mw-options legend {
	padding: 0 var(--space-2, 8px);
	font-weight: 600;
}

.wpdo-mw-options label {
	display: block;
	margin: var(--space-2, 8px) 0;
	cursor: pointer;
	transition: color var(--duration-normal, 200ms) var(--ease-default, ease);
}

.wpdo-mw-options label:hover {
	color: var(--color-accent, #c9a55a);
}

.wpdo-mw-confirm {
	background: var(--color-warn-soft, #fff3cd);
	border: 1px solid var(--color-warn, #d4a04f);
	border-radius: var(--radius-sm, 8px);
	padding: var(--space-3, 12px) var(--space-4, 16px);
	margin: var(--space-4, 16px) 0;
}

.wpdo-mw-confirm label {
	cursor: pointer;
}

#wpdo-mw-start {
	min-height: 44px;
	font-size: 1.05rem;
	padding: var(--space-3, 12px) var(--space-6, 24px);
	border-radius: var(--radius-md, 12px);
	transition: transform var(--duration-normal, 200ms) var(--ease-default, ease);
}

#wpdo-mw-start:not([disabled]):hover {
	transform: translateY(-1px);
}

/* ── Progress panel ──────────────────────────────────────────── */
.wpdo-mw-progress-bar {
	position: relative;
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border-soft, #e5dccd);
	border-radius: var(--radius-pill, 999px);
	height: 28px;
	overflow: hidden;
	margin: var(--space-4, 16px) 0;
}

.wpdo-mw-progress-fill {
	background: linear-gradient(
		90deg,
		var(--color-accent, #c9a55a),
		var(--color-accent-strong, #b08c3a)
	);
	height: 100%;
	transition: width var(--duration-normal, 300ms) var(--ease-default, ease);
}

.wpdo-mw-progress-pct {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: 600;
	font-family: var(--font-family-display, serif);
	mix-blend-mode: difference;
	color: #fff;
}

.wpdo-mw-current {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: var(--space-3, 12px) 0;
}

.wpdo-mw-current code {
	background: var(--color-surface, #fff);
	padding: var(--space-1, 4px) var(--space-2, 8px);
	border-radius: var(--radius-sm, 8px);
	font-family: var(--font-family-body, monospace);
}

.wpdo-mw-elapsed {
	font-family: var(--font-family-display, serif);
	font-size: 1.1rem;
	color: var(--color-ink-soft, #6b5d44);
	min-width: 70px;
	text-align: right;
}

.wpdo-mw-live-ratio {
	background: var(--color-accent-soft, #f4e9d4);
	padding: var(--space-2, 8px) var(--space-4, 16px);
	border-radius: var(--radius-sm, 8px);
	margin: var(--space-3, 12px) 0;
	font-family: var(--font-family-display, serif);
}

.wpdo-mw-log-wrap h4 {
	margin: var(--space-4, 16px) 0 var(--space-2, 8px);
	font-family: var(--font-family-display, serif);
}

.wpdo-mw-log {
	background: var(--color-ink, #2c2618);
	color: var(--color-paper, #f4ecdb);
	padding: var(--space-4, 16px);
	border-radius: var(--radius-sm, 8px);
	font-family: var(--font-family-body, monospace);
	font-size: 0.85rem;
	line-height: 1.6;
	max-height: 320px;
	overflow-y: auto;
	white-space: pre-wrap;
	margin: 0;
}

.wpdo-mw-log-flash {
	animation: wpdo-mw-log-pulse var(--duration-normal, 350ms) var(--ease-default, ease);
}

@keyframes wpdo-mw-log-pulse {
	0%   { box-shadow: inset 0 0 0 0 var(--color-accent, #c9a55a); }
	30%  { box-shadow: inset 0 0 30px -8px var(--color-accent, #c9a55a); }
	100% { box-shadow: inset 0 0 0 0 transparent; }
}

.wpdo-mw-actions {
	display: flex;
	gap: var(--space-2, 8px);
	margin-top: var(--space-4, 16px);
}

.wpdo-mw-failed {
	color: var(--color-error, #b03d3d);
}

/* ── Done panel ──────────────────────────────────────────────── */
.wpdo-mw-done {
	background: var(--color-success-soft, #d8efd8);
	border-color: var(--color-success, #5a8c5a);
}

.wpdo-mw-done-summary {
	margin: var(--space-4, 16px) 0;
}

.wpdo-mw-done-line {
	padding: var(--space-2, 8px) 0;
	border-bottom: 1px dashed var(--color-border-soft, #e5dccd);
}

.wpdo-mw-done-line:last-child {
	border-bottom: 0;
}

.wpdo-mw-done-line span {
	display: inline-block;
	min-width: 100px;
	color: var(--color-ink-soft, #6b5d44);
}