/*
 * Admin styles for Harbor Attio Sync for WooCommerce
 */

:root {
	--wcattio-color-success: #1a6b2d; /* 6.59:1 contrast on white (WCAG AA) */
	--wcattio-color-error:   #c0392b;
	--wcattio-font-sm:       0.9em;
}

/* -------------------------------------------------------------------------
 * Sections
 * ---------------------------------------------------------------------- */

.wcattio-section {
	border-bottom: 1px solid #dcdcde;
	margin-bottom: 2em;
	padding-bottom: 1.5em;
}

.wcattio-section:last-child {
	border-bottom: none;
}

.wcattio-section h2 {
	font-size: 1.1em;
	margin-top: 1.5em;
}

/* -------------------------------------------------------------------------
 * API key field row
 * ---------------------------------------------------------------------- */

.wcattio-api-key-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
}

.wcattio-api-key-wrap input[type="password"] {
	flex: 1 1 280px;
	max-width: 400px;
}

/* -------------------------------------------------------------------------
 * Connection status indicator
 * ---------------------------------------------------------------------- */

.wcattio-connection-status {
	display: inline-flex;
	align-items: center;
	font-size: var(--wcattio-font-sm);
	font-weight: 500;
	gap: 0.3em;
	min-height: 1.4em;
}

.wcattio-connection-status.success {
	color: var(--wcattio-color-success);
}

.wcattio-connection-status.error {
	color: var(--wcattio-color-error);
}

/* -------------------------------------------------------------------------
 * Manual sync action rows
 * ---------------------------------------------------------------------- */

.wcattio-manual-sync-actions {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.wcattio-sync-action {
	display: flex;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
}

.wcattio-sync-status {
	font-size: var(--wcattio-font-sm);
	color: #646970;
}

.wcattio-sync-status.success {
	color: var(--wcattio-color-success);
}

.wcattio-sync-status.error {
	color: var(--wcattio-color-error);
}

/* -------------------------------------------------------------------------
 * Status badges (log table)
 * ---------------------------------------------------------------------- */

.wcattio-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.6;
	white-space: nowrap;
}

.wcattio-badge--success {
	background-color: #d1fae5;
	color: #065f46;
}

.wcattio-badge--error {
	background-color: #fee2e2;
	color: #991b1b;
}

.wcattio-badge--pending {
	/* border adds depth; #374151 on #e5e7eb gives 7.5:1 (WCAG AAA) */
	background-color: #e5e7eb;
	border: 1px solid #d1d5db;
	color: #374151;
}

/* -------------------------------------------------------------------------
 * Pro features box
 * ---------------------------------------------------------------------- */

.wcattio-pro-features {
	background: #f8f9fa;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	margin-top: 2em;
	max-width: 700px;
	padding: 1.5em 2em;
	position: relative;
}

.wcattio-pro-badge,
.wcattio-pro-badge--tab {
	background: #2271b1;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-weight: 700;
	text-transform: uppercase;
}

.wcattio-pro-badge {
	font-size: 0.7em;
	letter-spacing: 0.08em;
	margin-bottom: 0.5em;
	padding: 2px 8px;
}

.wcattio-pro-feature-list {
	list-style: none;
	margin: 0.75em 0 1.25em;
	padding: 0;
}

.wcattio-pro-feature-list li {
	padding: 0.3em 0 0.3em 1.5em;
	position: relative;
	color: #3c434a;
}

.wcattio-pro-feature-list li::before {
	content: "\2713"; /* checkmark */
	color: #2271b1;
	font-weight: 700;
	position: absolute;
	left: 0;
}

.wcattio-pro-cta {
	margin-top: 0.5em;
}

.wcattio-pro-cta-note {
	margin-top: 0.5em;
}

/* -------------------------------------------------------------------------
 * Pro tab badge (inline in nav)
 * ---------------------------------------------------------------------- */

.wcattio-pro-badge--tab {
	font-size: 0.6em;
	letter-spacing: 0.06em;
	margin-left: 4px;
	padding: 1px 5px;
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
 * Pro field mapping + list rules tables
 * ---------------------------------------------------------------------- */

.wcattio-mapping-table,
.wcattio-rules-table {
	margin-top: 1em;
	margin-bottom: 0.75em;
}

.wcattio-mapping-table td,
.wcattio-rules-table td {
	vertical-align: middle;
	padding: 6px 8px;
}

.wcattio-mapping-table select,
.wcattio-mapping-table input[type="text"],
.wcattio-rules-table select,
.wcattio-rules-table input[type="text"] {
	width: 100%;
	max-width: 280px;
}

.wcattio-rules-table input[type="number"] {
	width: 80px;
}

/* -------------------------------------------------------------------------
 * Log table tweaks
 * ---------------------------------------------------------------------- */

.wcattio-log-table-wrap {
	overflow-x: auto;
}

.wcattio-log-table .column-id {
	width: 60px;
}

.wcattio-log-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1em;
}

.wcattio-log-toolbar form {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
}

.wcattio-clear-logs-form {
	display: inline-block;
	margin-left: 1em;
}

.wcattio-empty-state {
	color: #646970;
	font-style: italic;
	padding: 2em;
	text-align: center;
}

.wcattio-empty {
	/* #767676 is the minimum grey that passes WCAG AA (4.54:1) on white */
	color: #767676;
}

.wcattio-error-text {
	color: var(--wcattio-color-error);
	font-size: var(--wcattio-font-sm);
}

/* -------------------------------------------------------------------------
 * Loading spinner on bulk sync buttons
 * ---------------------------------------------------------------------- */

@keyframes wcattio-spin {
	from { rotate: 0deg; }
	to   { rotate: 360deg; }
}

.wcattio-loading {
	position: relative;
	padding-left: 2em;
	pointer-events: none;
}

.wcattio-loading::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: wcattio-spin 0.7s linear infinite;
	position: absolute;
	left: 0.5em;
	top: 50%;
	translate: 0 -50%;
}

/* -------------------------------------------------------------------------
 * Empty-state rows in mapping/rules tables
 * ---------------------------------------------------------------------- */

.wcattio-empty-row td {
	color: #646970;
	font-style: italic;
	padding: 1em;
}

/* -------------------------------------------------------------------------
 * Expandable error messages in log table
 * ---------------------------------------------------------------------- */

.wcattio-error-details {
	cursor: pointer;
}

.wcattio-error-details summary {
	list-style: none;
	display: inline;
}

.wcattio-error-details summary::after {
	content: " ▸";
	font-size: 0.75em;
	opacity: 0.6;
}

.wcattio-error-details[open] summary::after {
	content: " ▾";
}

.wcattio-error-full {
	margin: 0.4em 0 0;
	font-size: 0.85em;
	white-space: pre-wrap;
	word-break: break-all;
	color: var(--wcattio-color-error);
}

/* -------------------------------------------------------------------------
 * Onboarding and health notices
 * ---------------------------------------------------------------------- */

.wcattio-onboarding-notice a {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Responsive: stack to single column below WP's breakpoint
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 782px) {
	.nav-tab-wrapper.woo-nav-tab-wrapper {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
	}

	.nav-tab-wrapper.woo-nav-tab-wrapper .nav-tab {
		flex-shrink: 0;
	}

	.wcattio-api-key-wrap {
		flex-direction: column;
		align-items: flex-start;
	}

	.wcattio-api-key-wrap input[type="password"] {
		height: 32px;
		max-width: 100%;
		min-height: unset;
		width: 100%;
	}

	.wcattio-sync-action {
		flex-direction: column;
		align-items: flex-start;
	}

	.wcattio-pro-features {
		padding: 1em;
	}

	.wcattio-log-table-wrap .wcattio-log-table {
		table-layout: auto;
	}

	.wcattio-log-table .column-id {
		width: auto;
	}

	.wcattio-log-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	.wcattio-log-toolbar form {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.wcattio-log-toolbar select,
	.wcattio-log-toolbar input[type="submit"] {
		width: 100%;
	}

	.wcattio-clear-logs-form {
		margin-left: 0;
	}
}

/* -------------------------------------------------------------------------
 * Responsive: extra-narrow (375px / iPhone SE and similar)
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 480px) {
	.wcattio-pro-features {
		max-width: 100%;
		padding: 0.875em;
	}

	.wcattio-mapping-table select,
	.wcattio-mapping-table input[type="text"],
	.wcattio-rules-table select,
	.wcattio-rules-table input[type="text"] {
		max-width: 100%;
	}

	.wcattio-badge {
		font-size: 0.75em;
		padding: 2px 7px;
	}
}
