/* Settings view */

@layer components {
	.settings-view {
		overflow-y: visible; /* prevent double scroll — parent custom element handles scrolling */
	}

	.settings-header {
		margin-block-end: var(--space-6);
	}

	.settings-tabs {
		display: flex;
		border-block-end: 1px solid var(--color-border-default);
		margin-block-end: var(--space-6);
		gap: 0;
	}

	.settings-tab {
		background: none;
		border: none;
		border-block-end: 2px solid transparent;
		margin-block-end: -1px;
		padding: var(--space-2) var(--space-5);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		color: var(--color-text-secondary);
		cursor: pointer;

		&:hover {
			color: var(--color-text-primary);
		}

		&.settings-tab--active {
			color: var(--color-text-heading);
			border-block-end-color: var(--color-accent-primary);
		}
	}

	.settings-body > .settings-section {
		border-block-start: none;
		padding-block-start: 0;
	}

	.settings-back {
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		text-decoration: none;
		display: inline-block;
		margin-block-end: var(--space-4);

		&:hover {
			color: var(--color-text-heading);
		}
	}

	.settings-title {
		font-size: var(--font-size-display);
		color: var(--color-text-heading);
		margin-block-end: 0;
	}

	.settings-section {
		border-block-start: 1px solid var(--color-border-default);
		padding-block-start: var(--space-6);
	}

	.settings-section-title {
		font-size: var(--font-size-lg);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-heading);
		margin: 0 0 var(--space-2);
	}

	.settings-section-desc {
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		margin: 0 0 var(--space-5);
		line-height: 1.6;
	}

	.settings-subsection-title {
		font-size: var(--font-size-base);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-heading);
		margin: var(--space-6) 0 var(--space-2);
	}

	.settings-prompt-textarea {
		width: 100%;
		box-sizing: border-box;
		resize: vertical;
		font-family: var(--font-mono, monospace);
		font-size: var(--font-size-xs);
		line-height: var(--line-height-normal);
		padding: var(--space-3) var(--space-4);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		background: var(--color-bg-surface);
		color: var(--color-text-secondary);
		margin-block-end: var(--space-4);

		&:focus {
			outline: none;
			border-color: var(--color-accent-secondary);
			color: var(--color-text-primary);
		}
	}

	.settings-profile-textarea {
		width: 100%;
		box-sizing: border-box;
		resize: vertical;
		font-family: var(--font-body);
		font-size: var(--font-size-sm);
		line-height: var(--line-height-normal);
		padding: var(--space-3) var(--space-4);
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		background: var(--color-bg-surface);
		color: var(--color-text-primary);
		margin-block-end: var(--space-4);

		&:focus {
			outline: none;
			border-color: var(--color-accent-secondary);
		}
	}

	.settings-actions {
		display: flex;
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.settings-error {
		font-size: var(--font-size-sm);
		color: var(--color-error);
		margin-block-end: var(--space-3);
	}

	.settings-success {
		font-size: var(--font-size-sm);
		color: var(--color-success);
		margin-block-end: var(--space-3);
	}

	.ai-regen-summary {
		font-size: var(--font-size-sm);
		color: var(--color-text-secondary);
		margin: 0 0 var(--space-3);
	}

	.ai-regen-status-msg {
		font-size: var(--font-size-sm);
		color: var(--color-accent-secondary);
		margin: 0 0 var(--space-3);
	}

	.ai-regen-list {
		max-height: 60vh;
		overflow-y: auto;
		border: 1px solid var(--color-border-default);
		border-radius: var(--radius-sm);
		background: var(--color-bg-surface);
	}

	.ai-regen-row {
		display: grid;
		grid-template-columns: 1.25rem 1fr auto;
		align-items: baseline;
		gap: var(--space-2);
		padding: var(--space-1) var(--space-3);
		font-size: var(--font-size-xs);
		border-block-end: 1px solid var(--color-border-subtle, var(--color-border-default));

		&:last-child {
			border-block-end: none;
		}
	}

	.ai-regen-icon {
		font-size: 0.65rem;
		text-align: center;

		.ai-regen-processing & {
			animation: spin 1s linear infinite;
			display: inline-block;
		}
	}

	.ai-regen-name {
		color: var(--color-text-primary);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ai-regen-vintage {
		color: var(--color-text-secondary);
		margin-inline-start: var(--space-1);
	}

	.ai-regen-err {
		color: var(--color-error);
		font-size: var(--font-size-xs);
		grid-column: 2 / -1;
		word-break: break-word;
	}

	.ai-regen-pending .ai-regen-icon {
		color: var(--color-text-muted);
	}
	.ai-regen-processing .ai-regen-icon {
		color: var(--color-accent-secondary);
	}
	.ai-regen-done .ai-regen-icon {
		color: var(--color-success);
	}
	.ai-regen-skipped .ai-regen-icon {
		color: var(--color-text-muted);
	}
	.ai-regen-error .ai-regen-icon {
		color: var(--color-error);
	}

	.ai-regen-skipped .ai-regen-name {
		color: var(--color-text-muted);
	}
	.ai-regen-done .ai-regen-name {
		color: var(--color-text-secondary);
	}

	.settings-loading {
		padding: var(--space-8);
		color: var(--color-text-secondary);
	}

	.theme-swatches {
		display: flex;
		gap: var(--space-3);
		flex-wrap: wrap;
	}

	.theme-swatch {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		background: var(--color-bg-surface);
		border: 1px solid var(--color-border-default);
		color: var(--color-text-primary);
		padding: var(--space-3) var(--space-4);
		cursor: pointer;
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-medium);
		letter-spacing: var(--letter-spacing-wide);
		text-transform: uppercase;
		border-radius: var(--radius-sm);
		transition:
			border-color var(--transition-fast),
			box-shadow var(--transition-fast);

		&:hover {
			border-color: var(--color-accent-primary);
			background: var(--color-bg-surface);
			color: var(--color-text-primary);
			box-shadow: none;
		}

		&.theme-swatch--active {
			border-color: var(--color-accent-primary);
			outline: 2px solid var(--color-accent-primary);
			outline-offset: -1px;
			color: var(--color-accent-primary);
			font-weight: var(--font-weight-semibold);
		}
	}

	.theme-swatch-chip {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		flex-shrink: 0;
		border: 1px solid rgba(0, 0, 0, 0.12);
	}

	.theme-swatch--vineyard .theme-swatch-chip {
		background: linear-gradient(135deg, #e8dfd4 50%, #9b6b4a 50%);
	}

	.theme-swatch--cellar .theme-swatch-chip {
		background: linear-gradient(135deg, #231f1c 50%, #c8826d 50%);
	}

	.theme-swatch--verdure .theme-swatch-chip {
		background: linear-gradient(135deg, #f0f4ec 50%, #a85a38 50%);
	}

	.theme-swatch--pomme .theme-swatch-chip {
		background: linear-gradient(135deg, #faf6e8 50%, #3d6b3a 50%);
	}

	.theme-swatch--adriatic .theme-swatch-chip {
		background: linear-gradient(135deg, #f4f8fb 50%, #c8826d 50%);
	}

	/* Settings nav tile */
	.settings-nav-tile {
		text-decoration: none;
		color: var(--color-text-primary);
	}

	.settings-nav-tile-desc {
		font-size: var(--font-size-xs);
		color: var(--color-text-secondary);
	}
}