/**
 * Connectors — All Styles
 *
 * wp-admin chrome (adminbar, sidebar, content frame) +
 * Connectors page components (cards, buttons, forms, states).
 *
 * All component styles scoped inside .wp-connectors-frame.
 * State visibility controlled via data-state attribute on .connector-card.
 */


/* ================================================================
   Reset & base
   ================================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 13px;
	line-height: 1.4em;
	color: #3c434a;
	background: #1e1e1e;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ================================================================
   wp-admin chrome — adminbar, sidebar, content area
   ================================================================ */

#wpadminbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	height: 32px;
	background: #1d2327;
}

#adminmenuwrap {
	position: fixed;
	top: 32px;
	left: 0;
	bottom: 0;
	width: 160px;
	z-index: 9990;
	background: #1d2327;
}

#wpcontent {
	margin-left: 160px;
	margin-top: 32px;
	height: calc(100vh - 16px);
	background: #1e1e1e;
	padding: 0 8px 8px 0;
}

.wp-connectors-frame {
	background: #ffffff;
	border-radius: 8px;
	min-height: calc(100vh - 32px - 8px);
	padding: 0;
	position: relative;
}


/* ================================================================
   Page header
   ================================================================ */

.wp-connectors-frame .connectors-header {
	padding: 16px 24px;
	border-bottom: 1px solid #e0e0e0;
}

.wp-connectors-frame .connectors-title {
	font-size: 24px;
	font-weight: 400;
	color: #1e1e1e;
	margin: 0 0 8px;
	line-height: 1.3;
}

.wp-connectors-frame .connectors-subtitle {
	font-size: 13px;
	color: #757575;
	/* max-width: 560px; */
	margin: 0;
	line-height: 1.5;
}

.wp-connectors-frame .connectors-body {
	padding: 24px;
}


/* ================================================================
   Connector list + card
   ================================================================ */

.wp-connectors-frame .connectors-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 680px;
	margin: 0 auto;
}

.wp-connectors-frame .connector-card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 20px;
}


/* ================================================================
   Card header row — icon + text + actions
   ================================================================ */

.wp-connectors-frame .connector-card__header {
	display: flex;
	align-items: center;
	gap: 16px;
}


/* Card icon */

.wp-connectors-frame .connector-card__icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 0;
}

.wp-connectors-frame .connector-card__icon img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 0;
}


/* Card text */

.wp-connectors-frame .connector-card__text {
	flex: 1;
	min-width: 0;
}

.wp-connectors-frame .connector-card__name {
	font-size: 15px;
	font-weight: 600;
	color: #1e1e1e;
	line-height: 1.3;
	margin: 0 0 2px;
}

.wp-connectors-frame .connector-card__description {
	font-size: 12px;
	color: #757575;
	line-height: 1.4;
	margin: 0;
}


/* Card actions container */

.wp-connectors-frame .connector-card__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}


/* ================================================================
   Buttons — shared base
   ================================================================ */

.wp-connectors-frame button {
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	line-height: 1.4;
}


/* ================================================================
   Action buttons — outlined style (secondary)
   ================================================================ */

.wp-connectors-frame .action-install,
.wp-connectors-frame .action-activate,
.wp-connectors-frame .action-connect,
.wp-connectors-frame .action-setup {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #3858E9;
	background: transparent;
	border-radius: 2px;
	padding: 6px 16px;
	color: #3858E9;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.wp-connectors-frame .action-install:hover,
.wp-connectors-frame .action-activate:hover,
.wp-connectors-frame .action-connect:hover,
.wp-connectors-frame .action-setup:hover {
	background: rgba(56, 88, 233, 0.08);
}


/* Installing — barberpole animation */

.wp-connectors-frame .action-installing {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #c0c0c0;
	background-color: #f0f0f0;
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 6px,
		rgba(0, 0, 0, 0.06) 6px,
		rgba(0, 0, 0, 0.06) 12px
	);
	background-size: 34px 34px;
	animation: barberpole 0.8s linear infinite;
	border-radius: 2px;
	padding: 6px 16px;
	color: #949494;
	cursor: default;
	white-space: nowrap;
	pointer-events: none;
}

@keyframes barberpole {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 34px 0;
	}
}


/* Text button — shared base for Cancel, Edit, Remove */

.wp-connectors-frame .btn-text {
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px 16px;
	text-decoration: none;
	border-radius: 2px;
	transition: background-color 0.15s ease;
}

.wp-connectors-frame .btn-text:hover {
	background: rgba(0, 0, 0, 0.05);
}


/* Cancel — theme text button */

.wp-connectors-frame .action-cancel {
	color: #3858E9;
}

.wp-connectors-frame .action-cancel:hover {
	background: rgba(56, 88, 233, 0.08);
}


/* Connected label — green */

.wp-connectors-frame .action-connected-label {
	color: #345B37;
	background: #EFF8F0;
	font-weight: 500;
	font-size: 13px;
	line-height: 1.4;
	padding: 4px 12px;
	border-radius: 2px;
}


/* Edit — theme text button */

.wp-connectors-frame .action-edit {
	color: #3858E9;
}

.wp-connectors-frame .action-edit:hover {
	background: rgba(56, 88, 233, 0.08);
}


/* Save button — filled (primary) */

.wp-connectors-frame .action-save {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #3858E9;
	color: #fff;
	border: none;
	border-radius: 2px;
	padding: 6px 16px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wp-connectors-frame .action-save:hover {
	background: #2C47C2;
}

.wp-connectors-frame .action-save.is-saving {
	background-color: #3858E9;
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 6px,
		rgba(255, 255, 255, 0.15) 6px,
		rgba(255, 255, 255, 0.15) 12px
	);
	background-size: 34px 34px;
	animation: barberpole 0.8s linear infinite;
	cursor: default;
	pointer-events: none;
}


/* Remove and replace — red text button */

.wp-connectors-frame .action-remove {
	color: #d63638;
	display: inline-block;
	padding: 0;
}

.wp-connectors-frame .action-remove:hover {
	background: none;
	text-decoration: underline;
}


/* ================================================================
   State visibility — hide everything by default, show per state
   ================================================================ */

.wp-connectors-frame .connector-card .action-install,
.wp-connectors-frame .connector-card .action-installing,
.wp-connectors-frame .connector-card .action-activate,
.wp-connectors-frame .connector-card .action-connect,
.wp-connectors-frame .connector-card .action-setup,
.wp-connectors-frame .connector-card .action-cancel,
.wp-connectors-frame .connector-card .action-connected-label,
.wp-connectors-frame .connector-card .action-edit,
.wp-connectors-frame .connector-card .connector-card__body {
	display: none;
}

/* install */
.wp-connectors-frame .connector-card[data-state="install"] .action-install {
	display: inline-flex;
}

/* installing */
.wp-connectors-frame .connector-card[data-state="installing"] .action-installing {
	display: inline-flex;
}

/* activate */
.wp-connectors-frame .connector-card[data-state="activate"] .action-activate {
	display: inline-flex;
}

/* connect */
.wp-connectors-frame .connector-card[data-state="connect"] .action-connect {
	display: inline-flex;
}

/* needs-setup — installed but no key yet (collapsed) */
.wp-connectors-frame .connector-card[data-state="needs-setup"] .action-setup {
	display: inline-flex;
}

/* setup */
.wp-connectors-frame .connector-card[data-state="setup"] .action-cancel {
	display: inline-block;
}

.wp-connectors-frame .connector-card[data-state="setup"] .connector-card__body--setup {
	display: block;
}

/* connected */
.wp-connectors-frame .connector-card[data-state="connected"] .action-connected-label {
	display: inline;
}

.wp-connectors-frame .connector-card[data-state="connected"] .action-edit {
	display: inline;
}

/* edit */
.wp-connectors-frame .connector-card[data-state="edit"] .action-cancel {
	display: inline-block;
}

.wp-connectors-frame .connector-card[data-state="edit"] .connector-card__body--edit {
	display: block;
}


/* ================================================================
   Card expanded body
   ================================================================ */

.wp-connectors-frame .connector-card__body {
	padding-top: 20px;
}


/* Field label — uppercase micro label */

.wp-connectors-frame .field-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #757575;
	margin-bottom: 6px;
}


/* Field input */

.wp-connectors-frame .field-input {
	display: block;
	width: 100%;
	border: 1px solid #949494;
	border-radius: 2px;
	padding: 8px 12px;
	font-size: 14px;
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	line-height: 1.4;
	color: #1e1e1e;
	background: #fff;
	outline: none;
	transition: border-color 0.15s ease;
}

.wp-connectors-frame .field-input::placeholder {
	color: #949494;
}

.wp-connectors-frame .field-input:focus {
	border-color: #3858E9;
	box-shadow: 0 0 0 1px #3858E9;
}


/* Edit state input — masked value, muted background */

.wp-connectors-frame .connector-card__body--edit .field-input {
	background: #f0f0f0;
	color: #757575;
}


/* Help text */

.wp-connectors-frame .field-help {
	font-size: 13px;
	color: #757575;
	margin-top: 8px;
	line-height: 1.5;
}

.wp-connectors-frame .field-help a {
	color: #3858E9;
}

.wp-connectors-frame .field-help a:hover {
	color: #1733ab;
}

.wp-connectors-frame .field-help a::after {
	content: " \2197";
	font-size: 11px;
}


/* ================================================================
   Error messages
   ================================================================ */

.wp-connectors-frame .field-error,
.wp-connectors-frame .connector-card__error {
	font-size: 13px;
	color: #d63638;
	line-height: 1.5;
	margin: 0;
	display: none;
}

.wp-connectors-frame .field-error::before,
.wp-connectors-frame .connector-card__error::before {
	content: "\26A0";
	margin-right: 6px;
}

.wp-connectors-frame .field-error {
	margin-top: 4px;
	margin-bottom: 8px;
}

.wp-connectors-frame .connector-card__error {
	margin-top: 4px;
}

.wp-connectors-frame .field-error.is-visible,
.wp-connectors-frame .connector-card__error.is-visible {
	display: block;
}


/* ================================================================
   Empty state
   ================================================================ */

.wp-connectors-frame .connectors-empty {
	display: none;
	max-width: 400px;
	margin: 0 auto;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.wp-connectors-frame .connectors-empty__title {
	font-size: 18px;
	font-weight: 600;
	color: #1e1e1e;
	margin: 0 0 8px;
	line-height: 1.3;
}

.wp-connectors-frame .connectors-empty__text {
	font-size: 13px;
	color: #757575;
	line-height: 1.5;
	margin: 0 0 12px;
}

.wp-connectors-frame .connectors-empty__action {
	margin-top: 16px;
}

.wp-connectors-frame .connectors-empty__plugins {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
}

.wp-connectors-frame .connectors-empty__plugins-title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #757575;
	margin-bottom: 4px;
}

.wp-connectors-frame .connectors-empty__plugins-list {
	display: flex;
	gap: 8px;
}

.wp-connectors-frame .connectors-empty__plugin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #1e1e1e;
}

.wp-connectors-frame .connectors-empty__plugin img {
	width: 20px;
	height: 20px;
}


/* ================================================================
   Demo toggles — floating bottom-left toolbar
   ================================================================ */

.demo-toggles {
	position: fixed;
	bottom: 16px;
	left: 176px;
	z-index: 100000;
	display: flex;
	gap: 4px;
}

.demo-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 8px 14px;
	border-radius: 100px;
	cursor: pointer;
	user-select: none;
}

.demo-toggle__label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
}

.demo-toggle__track {
	width: 32px;
	height: 18px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 100px;
	position: relative;
	transition: background-color 0.15s ease;
}

.demo-toggle__thumb {
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: transform 0.15s ease;
}

.demo-toggle.is-active .demo-toggle__track {
	background: #3858E9;
}

.demo-toggle.is-active .demo-toggle__thumb {
	transform: translateX(14px);
}