// ==========================================================================
// Custom Fields — Settings › Feature Modules detail panel
// (`containers/CustomFields`). Uses the `bl-cf-*` markup and the same tokens as
// the redesigned Settings shell, so the panel stops falling back to the legacy
// `.btl-form-group` compatibility skin.
//
// NOTE: this partial is @imported INSIDE `.betterlinks-body { … }`, so a bare
// `body.betterlinks-dark-mode { … }` would compile to a <body> nested inside a
// <div>. Dark overrides therefore use `body.betterlinks-dark-mode &` at the end.
// ==========================================================================
$cf-border: #e6e8ee;
$cf-text: #1a2233;
$cf-muted: #6b7280;
$cf-blue: #2f6bff;
$cf-blue-dark: #1f57e6;
$cf-surface: #f7f8fa;
$cf-white: #fff;
$cf-danger: #ef4444;
// Matches `$set-field-wide` in _settings.scss so the rows line up with the
// other panels' controls instead of stretching edge-to-edge.
$cf-width: 620px;

.bl-cf {
	max-width: $cf-width;
	color: $cf-text;
	font-size: 14px;
	line-height: 1.5;

	// ---- Doc note --------------------------------------------------------
	&__note {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin: 0 0 22px;
		padding: 12px 16px;
		border: 1px solid rgba($cf-blue, 0.25);
		border-radius: 10px;
		background: rgba($cf-blue, 0.06);
		font-size: 13px;

		svg {
			flex: none;
			margin-top: 1px;
			color: $cf-blue;
		}
		p {
			margin: 0;
		}
		strong {
			font-weight: 700;
		}
		a {
			color: $cf-blue;
			font-weight: 600;
			text-decoration: none;

			&:hover,
			&:focus {
				color: $cf-blue-dark;
				text-decoration: underline;
			}
		}
	}

	// ---- Field list ------------------------------------------------------
	&__list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-bottom: 14px;
	}

	&__row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 10px;
		align-items: center;
	}

	&__field {
		position: relative;
		min-width: 0;
	}

	&__input {
		width: 100%;
		// Beat the panel's legacy `input[type='text']` width cap.
		max-width: none;
		height: 44px;
		margin: 0;
		padding: 0 14px;
		border: 1px solid $cf-border;
		border-radius: 10px;
		background: $cf-white;
		color: $cf-text;
		font-size: 14px;
		line-height: 42px;
		box-shadow: none;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&::placeholder {
			color: #9aa2b1;
		}
		&:focus {
			border-color: $cf-blue;
			box-shadow: 0 0 0 3px rgba($cf-blue, 0.15);
			outline: none;
		}
	}

	// The stored key, derived from the label — shown so the value used by the
	// REST payload and shortcodes is never a surprise.
	&__slug {
		display: block;
		margin: 6px 2px 0;
		color: $cf-muted;
		font-size: 12px;

		code {
			padding: 1px 6px;
			border-radius: 5px;
			background: $cf-surface;
			color: $cf-text;
			font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
			font-size: 11.5px;
		}
	}

	&__remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid $cf-border;
		border-radius: 10px;
		background: $cf-white;
		color: $cf-muted;
		cursor: pointer;
		transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;

		&:hover,
		&:focus-visible {
			border-color: rgba($cf-danger, 0.5);
			background: rgba($cf-danger, 0.06);
			color: $cf-danger;
			outline: none;
		}
	}

	// ---- Add button ------------------------------------------------------
	&__add {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		height: 44px;
		padding: 0 16px;
		border: 1px dashed rgba($cf-blue, 0.45);
		border-radius: 10px;
		background: rgba($cf-blue, 0.04);
		color: $cf-blue;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: border-color 0.15s ease, background-color 0.15s ease;

		&:hover,
		&:focus-visible {
			border-color: $cf-blue;
			background: rgba($cf-blue, 0.09);
			outline: none;
		}
	}

	// ---- Empty state -----------------------------------------------------
	&__empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		margin-bottom: 14px;
		padding: 32px 24px;
		border: 1px dashed $cf-border;
		border-radius: 12px;
		background: $cf-surface;
		text-align: center;

		svg {
			color: #9aa2b1;
		}
	}
	&__empty-title {
		margin: 4px 0 0;
		font-size: 15px;
		font-weight: 600;
	}
	&__empty-desc {
		margin: 0;
		max-width: 340px;
		color: $cf-muted;
		font-size: 13px;
	}

	// ---- Validation ------------------------------------------------------
	&__error {
		display: flex;
		align-items: center;
		gap: 7px;
		margin: 12px 0 0;
		color: $cf-danger;
		font-size: 13px;
		font-weight: 500;

		svg {
			flex: none;
		}
	}

	&__row--invalid &__input,
	&__input--invalid {
		border-color: rgba($cf-danger, 0.6);

		&:focus {
			border-color: $cf-danger;
			box-shadow: 0 0 0 3px rgba($cf-danger, 0.15);
		}
	}

	@media screen and (max-width: 600px) {
		&__row {
			grid-template-columns: minmax(0, 1fr) auto;
		}
	}

	// ---- Dark mode -------------------------------------------------------
	// Palette mirrors the `body.betterlinks-dark-mode` block in _settings.scss
	// (surface #252f47, border #36405a, text #e5e9f2, accent #6f97ff).
	body.betterlinks-dark-mode & {
		color: #e5e9f2;

		.bl-cf__note {
			border-color: rgba(#6f97ff, 0.35);
			background: rgba(#6f97ff, 0.12);
			color: #d5ddf0;

			svg,
			a {
				color: #6f97ff;
			}
			a:hover,
			a:focus {
				color: #9db8ff;
			}
		}

		.bl-cf__input {
			border-color: #36405a;
			background: #252f47;
			color: #e5e9f2;

			&::placeholder {
				color: #7a8398;
			}
			&:focus {
				border-color: #6f97ff;
				box-shadow: 0 0 0 3px rgba(#6f97ff, 0.2);
			}
		}

		.bl-cf__slug {
			color: #9aa5bd;

			code {
				background: #1b2338;
				color: #c3cce0;
			}
		}

		.bl-cf__remove {
			border-color: #36405a;
			background: #252f47;
			color: #9aa5bd;

			&:hover,
			&:focus-visible {
				border-color: rgba($cf-danger, 0.6);
				background: rgba($cf-danger, 0.16);
				color: #ff8f8f;
			}
		}

		.bl-cf__add {
			border-color: rgba(#6f97ff, 0.5);
			background: rgba(#6f97ff, 0.1);
			color: #6f97ff;

			&:hover,
			&:focus-visible {
				border-color: #6f97ff;
				background: rgba(#6f97ff, 0.18);
			}
		}

		.bl-cf__empty {
			border-color: #36405a;
			background: #252f47;

			svg {
				color: #7a8398;
			}
		}
		.bl-cf__empty-desc {
			color: #9aa5bd;
		}

		.bl-cf__error {
			color: #ff8f8f;
		}
	}
}