// =============================================================================
// EazyDocs — Import / Export ("Tools") admin screen
// Branded hero, tabbed panel and cards so the screen matches the rest of the
// EazyDocs admin instead of bare WordPress markup.
// =============================================================================

.ezd-tools {
	--ezd-tools-primary: #7367f0;
	--ezd-tools-primary-dark: #5b4ff4;
	--ezd-tools-surface: #ffffff;
	--ezd-tools-surface-alt: #f8faff;
	--ezd-tools-border: #e4e9f3;
	--ezd-tools-text: #182132;
	--ezd-tools-text-soft: #5d6b82;

	max-width: 860px;

	.ezd-tools-hero {
		display: flex;
		align-items: center;
		gap: 16px;
		margin: 16px 0 20px;
		padding: 22px 24px;
		background: linear-gradient(135deg, var(--ezd-tools-primary) 0%, var(--ezd-tools-primary-dark) 100%);
		border-radius: 14px;
		color: #fff;

		&__icon {
			flex: 0 0 auto;
			width: 46px;
			height: 46px;
			font-size: 30px;
			line-height: 46px;
			text-align: center;
			background: rgba(255, 255, 255, 0.16);
			border-radius: 12px;
		}

		&__text {
			h1 {
				margin: 0 0 4px;
				padding: 0;
				font-size: 22px;
				font-weight: 700;
				color: #fff;
			}

			p {
				margin: 0;
				font-size: 13px;
				line-height: 1.5;
				color: rgba(255, 255, 255, 0.88);
			}
		}
	}

	.ezd-tools-notice {
		margin: 0 0 16px;
	}

	.ezd-tools-tabs {
		margin-bottom: 0;
		border-bottom: 1px solid var(--ezd-tools-border);

		.nav-tab {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 13px;

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

	.ezd-tools-panel {
		padding-top: 20px;
	}

	.ezd-tools-card {
		background: var(--ezd-tools-surface);
		border: 1px solid var(--ezd-tools-border);
		border-radius: 14px;
		padding: 24px;
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);

		&__head {
			margin-bottom: 20px;

			h2 {
				margin: 0 0 6px;
				padding: 0;
				font-size: 17px;
				font-weight: 700;
				color: var(--ezd-tools-text);
			}

			p {
				margin: 0;
				font-size: 13px;
				line-height: 1.55;
				color: var(--ezd-tools-text-soft);
			}
		}
	}

	.ezd-tools-field {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin-bottom: 18px;

		label {
			font-size: 13px;
			font-weight: 600;
			color: var(--ezd-tools-text);
		}

		select,
		input[type='file'] {
			max-width: 420px;
		}
	}

	.ezd-tools-field-row {
		display: flex;
		flex-wrap: wrap;
		gap: 18px;

		.ezd-tools-field {
			flex: 1 1 220px;
			min-width: 0;
		}
	}

	.ezd-tools-help {
		font-size: 12px;
		line-height: 1.5;
		color: var(--ezd-tools-text-soft);
	}

	.ezd-tools-empty {
		margin: 0;
		padding: 18px;
		background: var(--ezd-tools-surface-alt);
		border: 1px dashed var(--ezd-tools-border);
		border-radius: 10px;
		color: var(--ezd-tools-text-soft);
		text-align: center;
	}

	.ezd-tools-actions {
		margin-top: 6px;

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

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

			&.is-busy {
				opacity: 0.7;
				pointer-events: none;
			}
		}
	}

	.ezd-tools-result-links {
		margin: 4px 0 0;
		font-size: 12px;
		line-height: 1.6;
		color: var(--ezd-tools-text-soft);
	}

	.ezd-tools-note {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: -4px 0 18px;
		padding: 10px 12px;
		background: var(--ezd-tools-surface-alt);
		border: 1px solid var(--ezd-tools-border);
		border-radius: 8px;

		.dashicons {
			flex: 0 0 auto;
			font-size: 16px;
			width: 16px;
			height: 16px;
			line-height: 16px;
			color: var(--ezd-tools-primary);
		}
	}

	// The Migrate tab embeds the existing migration screen; reset its old
	// full-viewport centering so it sits as a normal card inside the panel.
	.ezd-migration-wrapper {
		display: block;
		height: auto;
		margin: 0;

		.ezd-migration-inner {
			padding: 0;
			background: transparent;
			text-align: left;
			border-radius: 0;

			// Override admin-global's generic `span` rule (display:block,
			// margin:auto, grey color) that would otherwise center and
			// mute every span in this card.
			span:not(.dashicons) {
				margin: 0;
				display: inline;
				color: inherit;
				font-size: inherit;
			}

			.dashicons {
				margin: 0;
			}
		}
	}

	// Centred brand header that reads as a BetterDocs → EazyDocs flow.
	.ezd-migration-head {
		margin-bottom: 22px;
		padding-bottom: 22px;
		text-align: center;
		border-bottom: 1px solid var(--ezd-tools-border);

		.ezd-migration-banner {
			display: block;
			width: auto;
			max-width: 230px;
			height: auto;
			margin: 0 auto 16px;
		}

		.ezd-migration-title {
			margin: 0 0 6px;
			padding: 0;
			font-size: 19px;
			font-weight: 700;
			color: var(--ezd-tools-text);
		}

		.ezd-migration-subtitle {
			max-width: 560px;
			margin: 0 auto;
			font-size: 13px;
			line-height: 1.6;
			color: var(--ezd-tools-text-soft);

			strong {
				color: var(--ezd-tools-text);
			}
		}
	}

	// "What happens" checklist, presented as a single bordered panel.
	.ezd-migration-list {
		margin: 0 0 20px;
		padding: 4px 20px;
		list-style: none;
		background: var(--ezd-tools-surface-alt);
		border: 1px solid var(--ezd-tools-border);
		border-radius: 12px;

		li {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			padding: 13px 0;
			font-size: 13px;
			line-height: 1.55;
			color: var(--ezd-tools-text);

			& + li {
				border-top: 1px solid var(--ezd-tools-border);
			}
		}

		&__icon {
			flex: 0 0 auto;
			margin-top: 1px;
			font-size: 18px;
			width: 18px;
			height: 18px;
			line-height: 18px;
			color: #2fb344;
		}

		&__text {
			flex: 1 1 auto;

			strong {
				font-weight: 600;
			}
		}

		code {
			padding: 2px 6px;
			background: var(--ezd-tools-surface);
			border: 1px solid var(--ezd-tools-border);
			border-radius: 4px;
			font-size: 12px;
			color: var(--ezd-tools-primary-dark);
		}
	}

	.ezd-migration-stats {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 18px;
		padding: 11px 16px;
		font-size: 13px;
		color: var(--ezd-tools-text);
		background: rgba(115, 103, 240, 0.07);
		border: 1px solid rgba(115, 103, 240, 0.2);
		border-radius: 8px;

		.dashicons {
			flex: 0 0 auto;
			font-size: 16px;
			width: 16px;
			height: 16px;
			line-height: 16px;
			color: var(--ezd-tools-primary);
		}

		strong {
			color: var(--ezd-tools-primary-dark);
		}
	}

	.ezd-tools-note--warning {
		background: #fff8e1;
		border-color: #ffe0a3;

		.dashicons {
			color: #d97706;
		}
	}

	// Action row: primary button on the left, help link trailing.
	.ezd-migration-footer {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px;
		margin-top: 4px;
		padding-top: 20px;
		border-top: 1px solid var(--ezd-tools-border);

		.ezd-start-migration-btn {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			margin: 0;
			padding: 0 26px;
			font-size: 13px;
			background: var(--ezd-tools-primary);
			border-color: var(--ezd-tools-primary);

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

			&:hover:not(:disabled):not([disabled]) {
				background: var(--ezd-tools-primary-dark);
				border-color: var(--ezd-tools-primary-dark);
			}

			&:disabled,
			&[disabled] {
				background: #e6e8ee;
				border-color: #e6e8ee;
				color: #9aa4b5;
				cursor: not-allowed;
			}
		}

		.ezd-migration-help {
			margin: 0;
		}
	}
}