/**
 * JVBase SEO Admin Styles
 */

.jvb-seo-admin {
	max-width: 1200px;
}

/* Tabs */
.jvb-seo-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid #c3c4c7;
	margin-bottom: 20px;
}

.jvb-seo-tabs .tab-btn {
	padding: 10px 20px;
	border: 1px solid transparent;
	border-bottom: none;
	background: #f0f0f1;
	cursor: pointer;
	font-size: 14px;
	margin-bottom: -1px;
	border-radius: 4px 4px 0 0;
}

.jvb-seo-tabs .tab-btn:hover {
	background: #fff;
}

.jvb-seo-tabs .tab-btn.active {
	background: #fff;
	border-color: #c3c4c7;
	font-weight: 600;
}

/* Tab content */
.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

/* Forms */
.jvb-seo-form,
.jvb-seo-fieldset {
	background: #fff;
	border: 1px solid #c3c4c7;
	padding: 20px;
	margin-bottom: 20px;
	border-radius: 4px;
}

.jvb-seo-form h2,
.jvb-seo-content-type h3 {
	margin-top: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.form-field {
	margin-bottom: 15px;
}

.form-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 5px;
}

.form-field input.regular-text,
.form-field input.large-text,
.form-field textarea,
.form-field select {
	width: 100%;
	max-width: 600px;
}

.form-field input.small-text {
	width: 80px;
}

.form-field .description {
	display: block;
	color: #646970;
	font-size: 12px;
	margin-top: 4px;
}

.form-field textarea {
	min-height: 80px;
}

/* Fieldsets */
.jvb-seo-fieldset fieldset {
	border: 1px solid #ddd;
	padding: 15px;
	margin-bottom: 15px;
	border-radius: 4px;
}

.jvb-seo-fieldset fieldset legend {
	font-weight: 600;
	padding: 0 10px;
}

/* Content type sections */
.jvb-seo-content-type {
	margin-bottom: 30px;
}

.jvb-seo-content-type h3 {
	cursor: pointer;
	padding: 15px;
	background: #f6f7f7;
	border: 1px solid #c3c4c7;
	margin: 0;
	border-radius: 4px;
}

.jvb-seo-content-type h3:hover {
	background: #f0f0f1;
}

.jvb-seo-content-type .jvb-seo-fieldset {
	border-top: none;
	border-radius: 0 0 4px 4px;
}

/* Schema fields */
.schema-fields {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px dashed #ddd;
}

.schema-field-mapping {
	padding: 10px;
	background: #f9f9f9;
	border-radius: 4px;
	margin-bottom: 10px;
}

/* Form actions */
.form-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	padding-top: 15px;
	border-top: 1px solid #eee;
}

/* Repeater fields */
.repeater-field .repeater-row {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 8px;
}

.repeater-field .repeater-row input {
	flex: 1;
}

.repeater-field .remove-row {
	color: #b32d2e;
	border-color: #b32d2e;
	line-height: 1;
	padding: 4px 10px;
}

.repeater-field .add-row {
	margin-top: 5px;
}

/* Image field */
.image-field {
	display: flex;
	align-items: center;
	gap: 10px;
}

.image-field .image-preview img {
	max-height: 50px;
	border-radius: 4px;
}

/* Variable reference */
.jvb-seo-variable-ref {
	background: #f0f6fc;
	border: 1px solid #72aee6;
	padding: 15px;
	margin-top: 20px;
	border-radius: 4px;
}

.jvb-seo-variable-ref h3 {
	margin-top: 0;
	color: #135e96;
}

.jvb-seo-variable-ref .variable-list code {
	background: #fff;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 12px;
}

/* Notices */
.jvb-seo-admin .notice {
	margin: 15px 0;
}

/* Template fields - visual indicator */
.template-field {
	font-family: monospace;
	background: #fff;
}

.template-field:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

/* Responsive */
@media (max-width: 782px) {
	.jvb-seo-tabs {
		flex-wrap: wrap;
	}

	.jvb-seo-tabs .tab-btn {
		flex: 1 1 auto;
		text-align: center;
	}

	.form-field input.regular-text,
	.form-field input.large-text,
	.form-field textarea,
	.form-field select {
		max-width: 100%;
	}
}

/* Dashboard integration */
.jvb-dash .jvb-seo-admin {
	padding: 0;
}

.jvb-dash .jvb-seo-tabs {
	background: transparent;
}

.jvb-dash .jvb-seo-form,
.jvb-dash .jvb-seo-fieldset {
	background: var(--jvb-bg, #fff);
	border-color: var(--jvb-border, #c3c4c7);
}