/**
 * Purrlink Admin Settings Styles
 *
 * @package Purrlink
 */

// Variables
$purrlink-primary: #6366f1;
$purrlink-primary-hover: #4f46e5;
$purrlink-success: #22c55e;
$purrlink-error: #ef4444;
$purrlink-text: #1f2937;
$purrlink-text-muted: #6b7280;
$purrlink-border: #e5e7eb;
$purrlink-bg: #f9fafb;
$purrlink-white: #ffffff;

// Settings container
.purrlink-settings {
	max-width: 800px;
	margin: 20px 0;

	&--loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 200px;
		color: $purrlink-text-muted;

		.components-spinner {
			margin-bottom: 16px;
		}
	}

	&__title {
		font-size: 23px;
		font-weight: 400;
		margin: 0 0 20px 0;
		padding: 0;
		color: $purrlink-text;
	}

	// Tab panel
	&__tabs {
		background: $purrlink-white;
		border: 1px solid $purrlink-border;
		border-radius: 8px;
		overflow: hidden;

		.components-tab-panel__tabs {
			background: $purrlink-bg;
			border-bottom: 1px solid $purrlink-border;
			margin: 0;
			padding: 0;

			.components-tab-panel__tabs-item {
				padding: 12px 20px;
				font-weight: 500;
				color: $purrlink-text-muted;
				border-bottom: 2px solid transparent;
				margin-bottom: -1px;

				&:hover {
					color: $purrlink-text;
				}

				&.is-active {
					color: $purrlink-primary;
					border-bottom-color: $purrlink-primary;
					background: $purrlink-white;
				}

				&:focus:not(:disabled) {
					box-shadow: none;
					outline: 2px solid $purrlink-primary;
					outline-offset: -2px;
				}
			}
		}
	}

	&__panel {
		padding: 24px;
	}

	// Section within a tab
	&__section {
		h2 {
			font-size: 16px;
			font-weight: 600;
			margin: 0 0 8px 0;
			color: $purrlink-text;
		}

		.description {
			color: $purrlink-text-muted;
			margin: 0 0 24px 0;
			font-size: 14px;
		}

		// Field spacing
		.components-base-control {
			margin-bottom: 20px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		// Label styling
		.components-base-control__label {
			font-weight: 500;
			margin-bottom: 6px;
		}

		// Help text
		.components-base-control__help {
			color: $purrlink-text-muted;
			font-size: 12px;
			margin-top: 4px;
		}

		// Input styling
		.components-text-control__input,
		.components-textarea-control__input,
		.components-select-control__input {
			border-color: $purrlink-border;
			border-radius: 6px;

			&:focus {
				border-color: $purrlink-primary;
				box-shadow: 0 0 0 1px $purrlink-primary;
			}
		}
	}

	// API Key field with button
	&__field--api-key {
		display: flex;
		gap: 12px;
		align-items: flex-start;

		.components-base-control {
			flex: 1;
			margin-bottom: 0;
		}

		.components-button {
			margin-top: 24px; // Align with input (accounting for label)
			white-space: nowrap;
		}
	}

	// Help link
	&__help {
		margin-top: 12px;

		a {
			color: $purrlink-primary;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	// API key guide
	&__guide {
		margin-top: 24px;
		padding: 20px;
		background: $purrlink-bg;
		border: 1px solid $purrlink-border;
		border-radius: 6px;

		h3 {
			font-size: 14px;
			font-weight: 600;
			margin: 0 0 12px 0;
			color: $purrlink-text;
		}

		ol {
			margin: 0 0 12px 0;
			padding-left: 20px;
		}

		li {
			font-size: 13px;
			color: $purrlink-text;
			line-height: 1.8;
		}

		a {
			color: $purrlink-primary;
			text-decoration: none;
			font-weight: 500;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	&__guide-note {
		font-size: 12px;
		color: $purrlink-text-muted;
		margin: 0;
		padding-top: 8px;
		border-top: 1px solid $purrlink-border;
	}

	// Actions bar
	&__actions {
		margin-top: 24px;
		padding-top: 24px;
		border-top: 1px solid $purrlink-border;

		.components-button.is-primary {
			background: $purrlink-primary;
			border-color: $purrlink-primary;

			&:hover:not(:disabled) {
				background: $purrlink-primary-hover;
				border-color: $purrlink-primary-hover;
			}

			&:focus:not(:disabled) {
				box-shadow: 0 0 0 2px $purrlink-white, 0 0 0 4px $purrlink-primary;
			}
		}
	}

	// Notice styling
	.components-notice {
		margin: 0 0 20px 0;
		border-radius: 6px;

		&.is-success {
			background: rgba($purrlink-success, 0.1);
			border-left-color: $purrlink-success;
		}

		&.is-error {
			background: rgba($purrlink-error, 0.1);
			border-left-color: $purrlink-error;
		}
	}
}

// WordPress admin overrides
.settings_page_purrlink {
	#wpcontent {
		padding-left: 20px;
	}
}