/* ==========================================================================
   Skwirrel PIM Sync — Settings page redesign
   Same self-hosted brand fonts/icon font as the Debug tab (assets/debug-page.css:
   Anek Latin, Roboto — both open-licensed Google Fonts — and Phosphor, MIT).
   Visual layer only: every field name/id, JS hook, and ARIA attribute in
   render_page_settings() is untouched — this file restyles the existing
   classes, it does not change what any of them do.
   ========================================================================== */

@font-face {
	font-family: 'Anek Latin';
	src: url('fonts/anek-latin-variable.woff2') format('woff2-variations');
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('fonts/roboto-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Phosphor';
	src: url('fonts/phosphor.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

.skw-settings-page {
	--font-display: 'Anek Latin', ui-sans-serif, system-ui, sans-serif;
	--font-body: 'Roboto', ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--color-primary: hsl(220 100% 66%);
	--color-primary-darker: hsl(220 100% 90%);
	--color-lime: hsl(74 100% 71%);
	--color-neutral: hsl(220 10% 18%);
	--color-neutral-light: hsl(220 8% 40%);
	--color-mascot: hsl(217 40% 62%);
	--color-lavender: hsl(245 55% 82%);
	--color-error: hsl(354 65% 58%);
	--color-error-soft: hsl(355 80% 95%);
	--color-error-dark: hsl(354 60% 32%);
	--radius-sm: 0.25rem;

	/* Confirmed against the design system's own component source (Input/Select in
	   _ds_bundle.js): controls border with --sk-neutral (solid, full-opacity dark),
	   not the legacy --input-border-color role token (which resolves to a light
	   blue-tinted --color-primary-darker and is unused by the actual components). */
	--border-color: var(--color-neutral);

	font-family: var(--font-body);
	color: var(--color-neutral);
}

.skw-settings-page .ph {
	font-family: 'Phosphor' !important;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}
.skw-settings-page .ph-plugs-connected:before { content: '\eb5a'; }
.skw-settings-page .ph-arrows-clockwise:before { content: '\e094'; }
.skw-settings-page .ph-toggle-right:before { content: '\e676'; }
.skw-settings-page .ph-image:before { content: '\e2ca'; }
.skw-settings-page .ph-arrows-left-right:before { content: '\e0a0'; }
.skw-settings-page .ph-clock-clockwise:before { content: '\e19e'; }
.skw-settings-page .ph-file-text:before { content: '\e23a'; }
.skw-settings-page .ph-link-simple:before { content: '\e2e6'; }
.skw-settings-page .ph-sliders-horizontal:before { content: '\e434'; }
.skw-settings-page .ph-warning-octagon:before { content: '\e4e4'; }
.skw-settings-page .ph-bug:before { content: '\e5f4'; }
.skw-settings-page .ph-lifebuoy:before { content: '\e63a'; }
.skw-settings-page .ph-arrow-left:before { content: '\e058'; }
.skw-settings-page .ph-key:before { content: '\e2d6'; }
.skw-settings-page .ph-plugs:before { content: '\eb56'; }
.skw-settings-page .ph-trash:before { content: '\e4a6'; }
.skw-settings-page .ph-arrow-counter-clockwise:before { content: '\e038'; }

/* -- Header -- */

.skw-settings-page .skw-set-crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--color-neutral-light);
	padding-left: 24px;
}
.skw-settings-page .skw-set-crumbs a { color: inherit; text-decoration: none; }
.skw-settings-page .skw-set-crumbs a:hover { text-decoration: underline; }

.skw-settings-page .skw-set-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding: 0 24px;
}
.skw-settings-page .skw-set-header h1 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.2;
}
.skw-settings-page .skw-set-header p {
	margin: 6px 0 0;
	color: var(--color-neutral-light);
	font-size: 14px;
	max-width: 62ch;
}

.skw-set-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13px;
	padding: 0 14px;
	height: 34px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-neutral);
	background: #fff;
	color: var(--color-neutral);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
.skw-set-btn:hover { border-color: var(--color-neutral); color: var(--color-neutral); }
.skw-set-btn .ph { font-size: 16px; }

/* -- Tab strip -- */

.skw-settings-page .skw-tabs {
	gap: 28px;
	border-bottom: 1px solid rgb(28 31 38 / .1);
	margin: 0 0 24px;
	padding: 0 4px;
}
.skw-settings-page .skw-tab {
	padding: 0 0 14px;
	margin-bottom: -1px;
	border-radius: 0;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--color-neutral-light);
}
.skw-settings-page .skw-tab:hover {
	background: transparent;
	color: var(--color-neutral);
}
.skw-settings-page .skw-tab[aria-selected="true"] {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

/* -- Fieldgroup header: icon tile + title + description -- */

.skw-settings-page .skw-fieldgroup {
	padding-top: 4px;
}
.skw-settings-page .skw-fg-head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 20px;
}
.skw-settings-page .skw-fg-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--color-lime);
	flex-shrink: 0;
}
.skw-settings-page .skw-fg-icon.skw-fg-icon-blue { background: hsl(220 100% 96%); }
.skw-settings-page .skw-fg-icon.skw-fg-icon-red { background: var(--color-error-soft); }
.skw-settings-page .skw-fg-icon .ph { font-size: 20px; color: var(--color-neutral); }
.skw-settings-page .skw-fg-icon-blue .ph { color: var(--color-primary); }
.skw-settings-page .skw-fg-icon-red .ph { color: var(--color-error); }
.skw-settings-page .skw-fieldgroup-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.2;
	color: var(--color-neutral);
	margin: 0;
}
.skw-settings-page .skw-fg-desc {
	margin: 4px 0 0;
	color: var(--color-neutral-light);
	font-size: 14px;
	max-width: 74ch;
}

/* -- Fields -- */

.skw-settings-page .skw-label {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--color-neutral);
}
.skw-settings-page .skw-input,
.skw-settings-page .skw-select,
.skw-settings-page select.skw-select {
	box-sizing: border-box;
	height: 40px;
	font-family: var(--font-body);
	font-size: 14px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 0 12px;
	background: #fff;
	color: var(--color-neutral);
}
.skw-settings-page textarea.skw-input {
	height: auto;
	padding: 8px 12px;
}
.skw-settings-page .skw-input:focus,
.skw-settings-page .skw-select:focus {
	border-color: var(--color-mascot);
	outline: none;
	box-shadow: 0 0 0 1px var(--color-mascot);
}
.skw-settings-page .skw-input-affixed {
	box-sizing: border-box;
	height: 40px;
	display: flex;
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background: #fff;
}
.skw-settings-page .skw-input-affixed:focus-within {
	border-color: var(--color-mascot);
	box-shadow: 0 0 0 1px var(--color-mascot);
}
.skw-settings-page .skw-input-affixed .skw-input {
	height: 38px;
	border: 0;
	background: transparent;
}
.skw-settings-page .skw-input-prefix,
.skw-settings-page .skw-input-suffix {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 12px;
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--color-neutral-light);
	background: hsl(220 100% 96%);
	white-space: nowrap;
}
.skw-settings-page .skw-input-prefix {
	border-right: 1px solid var(--border-color);
}
.skw-settings-page .skw-input-suffix {
	border-left: 1px solid var(--border-color);
}
.skw-settings-page .skw-field-hint {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-neutral-light);
}
.skw-settings-page .skw-field-hint strong {
	color: var(--color-neutral);
	font-weight: 500;
}
.skw-settings-page .skw-field-hint code,
.skw-settings-page .skw-fg-desc code {
	font-family: var(--font-mono);
	font-size: 12.5px;
	background: hsl(220 100% 96%);
	padding: 1px 6px;
	border-radius: 4px;
}
.skw-settings-page .skw-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-neutral);
	cursor: pointer;
}
/* Matches the design system's own Checkbox component: a checked box fills with
   --sk-mascot (a muted blue-lavender, not the --color-lavender token itself — that
   one is reserved for hover/soft surfaces). Native rendering (box, tick, sizing)
   is kept as-is; accent-color only retints it, no custom-drawn checkmark.
   wp-admin's own forms.css paints :checked with an explicit background/border-color
   (var(--wp-admin-theme-color)) on top of that, which wins over plain accent-color
   since it isn't the same property — both need !important here to actually beat it. */
.skw-settings-page .skw-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--color-mascot) !important;
	cursor: pointer;
}
.skw-settings-page input[type="checkbox"]:checked {
	background: var(--color-mascot) !important;
	border-color: var(--color-mascot) !important;
}
.skw-settings-page .skw-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--color-mascot);
	outline-offset: 2px;
}
.skw-settings-page .skw-required,
.skw-settings-page .skw-field-required-marker {
	color: var(--color-error);
}

/* -- Token / connector status strip -- */

.skw-settings-page .skw-token-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	padding: 12px 16px;
	border-radius: 8px;
	background: hsl(220 100% 96%);
}
.skw-settings-page .skw-token-status .ph { font-size: 18px; color: var(--color-primary); }
.skw-settings-page .skw-token-status .skw-label { font-size: 14px; }
.skw-settings-page .skw-token-status-sep {
	width: 1px;
	height: 18px;
	background: rgb(28 31 38 / .12);
}
.skw-settings-page .skw-token-status span:last-child {
	font-size: 14px;
	color: var(--color-neutral-light);
}
.skw-settings-page .skw-token-status span:last-child strong {
	color: var(--color-neutral);
	font-weight: 500;
}

/* -- Field actions row (Save settings / Test connection) -- */

.skw-settings-page .skw-field-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}
/* Explicit override needed: an author-stylesheet display:flex above would otherwise
   beat the UA stylesheet's [hidden]{display:none} regardless of specificity, since
   normal author rules always win over normal user-agent rules. */
.skw-settings-page .skw-field-actions[hidden] {
	display: none;
}
/* "Test connection" lives inside the Connection panel; "Save settings" is the one
   shared submit button rendered once after every tab panel (kept as a single control
   on purpose — see SettingsTabsIntegrationTest — so a no-JS admin, who gets every
   panel stacked and visible at once, still has exactly one working Save). The inline
   script in class-skwirrel-wc-sync-admin-settings.php moves that same button node
   into this row while the Connection tab is active, and back out otherwise; the rules
   below cover both the JS-enhanced (nested) and no-JS (trailing sibling) layouts. */
.skw-settings-page .skw-field-actions-connection {
	padding-top: 16px;
	border-top: 1px solid rgb(28 31 38 / .1);
	margin-bottom: 0;
}
/* Once JS nests the shared button inside this row, it's a flex item, not a block —
   drop the base .skw-field-actions top margin so it lines up with Test connection. */
.skw-settings-page .skw-field-actions-connection > .skw-field-actions {
	margin-top: 0;
}
/* No-JS fallback: the shared Save button trails the Connection panel as a normal
   sibling instead of being nested in its row — still close, just stacked. */
.skw-settings-page .skw-tabpanel[data-skw-panel="connection"] ~ .skw-field-actions {
	margin-top: 24px;
}
.skw-settings-page .skw-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	height: 48px;
	padding: 0 20px;
	border-radius: var(--radius-sm);
	cursor: pointer;
}
.skw-settings-page .skw-btn .ph {
	font-size: 18px;
}
.skw-settings-page .skw-btn-secondary {
	background: #fff;
	border: 1px solid var(--color-neutral);
	color: var(--color-neutral);
}
.skw-settings-page .skw-btn-secondary:hover {
	background: hsl(220 100% 98%);
}
.skw-settings-page .skw-btn-danger {
	background: #fff;
	border: 1px solid var(--color-error);
	color: var(--color-error);
}
.skw-settings-page .skw-btn-danger:hover {
	background: var(--color-error-soft);
}
.skw-settings-page .skw-btn-danger-solid {
	background: var(--color-error);
	border: 1px solid var(--color-error);
	color: #fff;
}
.skw-settings-page .skw-btn-danger-solid:hover {
	background: var(--color-error-dark);
	border-color: var(--color-error-dark);
}
.skw-settings-page .skw-test-result {
	font-size: 13px;
	color: var(--color-neutral-light);
}

/* -- Product status mapping table -- */
/* Overrides WordPress core's .widefat (striped rows, grey chrome) with the design's
   plain card: soft header band, hairline row dividers, generous row padding. */

.skw-settings-page .skw-status-table {
	border: 1px solid rgb(28 31 38 / .1);
	border-radius: var(--radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: #fff;
}
.skw-settings-page .skw-status-table thead th {
	background: hsl(220 100% 98%);
	border-bottom: 1px solid rgb(28 31 38 / .1);
	padding: 10px 16px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13px;
	color: var(--color-neutral-light);
	text-align: left;
}
.skw-settings-page .skw-status-table tbody tr {
	background: #fff;
}
.skw-settings-page .skw-status-table tbody td {
	padding: 10px 16px;
	border-bottom: 1px solid rgb(28 31 38 / .06);
	vertical-align: middle;
}
.skw-settings-page .skw-status-table tbody tr:last-child td {
	border-bottom: 0;
}
.skw-settings-page .skw-status-table .skw-select {
	width: 100%;
	max-width: 320px;
}
.skw-settings-page .skw-status-table .skw-status-id {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	background: transparent;
	color: var(--color-neutral-light);
	border-radius: 0;
	padding: 0 4px 0 0;
	font-size: 12px;
	font-weight: 400;
}
.skw-settings-page .skw-status-table .skw-status-code {
	background: var(--color-neutral);
	color: #fff;
	border-radius: 4px;
	padding: 2px 7px;
	font-size: 11px;
	font-family: var(--font-mono);
}
.skw-settings-page .skw-status-table .skw-status-name {
	margin-left: 4px;
	font-size: 14px;
}
.skw-settings-page .skw-status-table .skw-status-row--pseudo td:first-child {
	color: var(--color-neutral-light);
	font-style: italic;
	font-size: 14px;
}
.skw-settings-page .skw-status-refresh {
	margin-top: 14px;
}
.skw-settings-page .skw-status-refresh .skw-field-hint {
	margin-left: 10px;
	display: inline;
}

/* -- Buttons -- */

.skw-settings-page .button-primary {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	height: 48px;
	padding: 0 20px;
	line-height: 46px;
	background: var(--color-neutral);
	border-color: var(--color-neutral);
	border-radius: var(--radius-sm);
	box-shadow: none;
	text-shadow: none;
}
.skw-settings-page .button-primary:hover,
.skw-settings-page .button-primary:focus {
	background: hsl(220 10% 28%);
	border-color: hsl(220 10% 28%);
}
.skw-settings-page .button:not(.button-primary) {
	font-family: var(--font-display);
	font-weight: 600;
	border-radius: var(--radius-sm);
	box-shadow: none;
}

/* -- Danger zone -- */

/* No border/card here on purpose: this panel now lives inside the same .skw-section
   box as every other tab (see render_page_settings()), not in a separate red-bordered
   card of its own — only the icon/heading keep the red "this is dangerous" accent. */
.skw-settings-page .skw-danger-zone .skw-fg-head { padding: 20px 0 0; }
.skw-settings-page .skw-danger-zone-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.2;
	margin: 0;
	color: var(--color-error);
}