/**
 * Settings Page Styles.
 */

/* ── Container ───────────────────────────────────────────── */
.settings {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--color-white);
	animation: scale-in var(--duration-base) var(--ease-out-expo);
}

/* ── Loading ─────────────────────────────────────────────── */
.settings-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	gap: var(--space-4);
}

.settings-loading__spinner {
	width: 36px;
	height: 36px;
	border: 3px solid var(--color-gray-200, #e5e7eb);
	border-top-color: var(--color-primary);
	border-radius: var(--radius-full);
	animation: settings-spin 0.7s linear infinite;
}

@keyframes settings-spin {
	to { transform: rotate(360deg); }
}

.settings-loading p {
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text-secondary);
	margin: 0;
}

/* ── Header ──────────────────────────────────────────────── */
.settings__header {
	margin-bottom: var(--space-6);
}

.settings__header h1 {
	font-family: var(--font-heading) !important;
	font-size: var(--text-2xl) !important;
	font-weight: var(--weight-semibold) !important;
	color: var(--color-text-primary) !important;
	margin: 0 0 2px 0 !important;
	line-height: var(--leading-tight) !important;
	letter-spacing: var(--tracking-tight) !important;
}

.settings__header p {
	font-family: var(--font-body) !important;
	font-size: var(--text-sm) !important;
	color: var(--color-text-secondary) !important;
	margin: 0 !important;
	line-height: var(--leading-relaxed) !important;
}

/* ── Sections ────────────────────────────────────────────── */
.settings__section {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	padding: var(--space-6) var(--space-7);
	margin-bottom: var(--space-4);
}

.settings__section:last-of-type {
	margin-bottom: 0;
}

/* Section header row (title + inline button) */
.settings__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
}

.settings__section-header h2 {
	margin: 0 !important;
}

.settings__section h2 {
	font-family: var(--font-heading) !important;
	font-size: var(--text-base) !important;
	font-weight: var(--weight-semibold) !important;
	color: var(--color-text-primary) !important;
	margin: 0 0 var(--space-2) 0 !important;
	letter-spacing: var(--tracking-tight) !important;
}

.settings__description {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin: 0;
	line-height: var(--leading-relaxed);
}

/* ── API key row ─────────────────────────────────────────── */
.settings__api-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.settings__input {
	flex: 1;
	height: 40px;
	padding: 0 var(--space-4);
	font-family: var(--font-mono, 'SFMono-Regular', 'Consolas', monospace);
	font-size: var(--text-sm);
	color: var(--color-text-primary);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: border-color var(--duration-fast, 150ms) ease;
	min-width: 0;
}

.settings__input--readonly {
	background: var(--color-bg-secondary, #f9fafb);
	color: var(--color-text-secondary);
	cursor: default;
}

.settings__input--readonly:focus {
	outline: none;
}

/* Icon action buttons */
.settings__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	color: var(--color-text-secondary);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--duration-fast, 150ms) ease;
}

.settings__icon-btn:hover {
	color: var(--color-text-primary);
	border-color: var(--color-border-medium, #ccc);
	background: var(--color-bg-secondary, #f9fafb);
}

.settings__icon-btn--success {
	color: var(--color-success, #16a34a);
	border-color: var(--color-success, #16a34a);
}

/* ── Buttons ─────────────────────────────────────────────── */
.settings__button {
	height: 36px;
	padding: 0 var(--space-5);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	border-radius: var(--radius-lg);
	border: none;
	cursor: pointer;
	transition: all var(--duration-base) var(--ease-out-expo);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	white-space: nowrap;
}

.settings__button--secondary {
	background: var(--color-white);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border);
}

.settings__button--secondary:hover:not(:disabled) {
	background: var(--color-bg-secondary, #f9fafb);
	border-color: var(--color-border-medium, #ccc);
}

.settings__button--danger {
	background: #e05c4e;
	color: var(--color-white);
}

.settings__button--danger:hover:not(:disabled) {
	background: #c94a3d;
}

.settings__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Modal ───────────────────────────────────────────────── */
.settings__modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: var(--z-modal-backdrop, 9000);
	padding: var(--space-5);
	animation: fade-in var(--duration-fast) var(--ease-out-expo);
}

.settings__modal {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-border);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	width: 100%;
	max-width: 380px;
	animation: scale-in var(--duration-base) var(--ease-out-expo);
}

.settings__modal-body {
	padding: var(--space-6);
}

.settings__modal-body h3 {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	font-weight: var(--weight-semibold);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3) 0;
	letter-spacing: var(--tracking-tight);
}

.settings__modal-body > p {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-4) 0;
	line-height: var(--leading-relaxed);
}

.settings__modal-subheading {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-2) 0 !important;
}

.settings__modal-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.settings__modal-list li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	padding: var(--space-1) 0;
	line-height: var(--leading-normal, 1.5);
}

.settings__modal-list li svg {
	flex-shrink: 0;
	color: var(--color-text-secondary);
}

.settings__modal-footer {
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--color-border);
	display: flex;
	justify-content: flex-end;
	gap: var(--space-3);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 782px) {
	.settings__section {
		padding: var(--space-5);
	}

	.settings__section-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.settings__api-row {
		flex-wrap: wrap;
	}

	.settings__input {
		width: 100%;
	}

	.settings__modal-footer {
		flex-direction: column;
	}

	.settings__modal-footer .settings__button {
		width: 100%;
	}
}