/**
 * WB Listora Settings — Pattern A Sidebar Layout
 *
 * @package WBListora
 */

/* ── Wrap ── */
.listora-settings-wrap {
	display: flex;
	gap: 0;
	min-height: 600px;
	margin: 20px 0 0;
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	border-radius: 4px;
	overflow: hidden;
}

/* ── Sidebar ── */
.listora-settings-sidebar {
	width: 240px;
	min-width: 240px;
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	border-left: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* Brand block */
.listora-settings-sidebar__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 16px;
	border-bottom: 1px solid var(--listora-border, var(--listora-wp-admin-border));
}

.listora-settings-sidebar__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--listora-primary, var(--listora-primary));
	border-radius: 8px;
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	flex-shrink: 0;
}

.listora-settings-sidebar__logo svg {
	width: 20px;
	height: 20px;
}

.listora-settings-sidebar__brand strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--listora-text, var(--listora-wp-admin-text));
	line-height: 1.3;
}

.listora-settings-sidebar__brand span:not(.listora-settings-sidebar__logo) {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-faint));
	text-transform: uppercase;
}

/* Nav groups */
.listora-settings-nav-group {
	padding: 12px 0 4px;
}

.listora-settings-nav-group__label {
	display: block;
	padding: 0 16px 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-faint));
	text-transform: uppercase;
}

/* Nav items */
.listora-settings-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	margin: 0 8px 2px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
	cursor: pointer;
}

.listora-settings-nav-item:hover {
	background: var(--listora-border, var(--listora-border-default));
	color: var(--listora-text, var(--listora-wp-admin-text));
}

.listora-settings-nav-item:focus-visible {
	outline: 2px solid var(--listora-primary, var(--listora-info));
	outline-offset: 2px;
}

.listora-settings-nav-item.is-active {
	background: var(--listora-primary, var(--listora-primary));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

.listora-settings-nav-item.is-active:hover {
	background: var(--listora-primary-hover, var(--listora-primary-hover));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

.listora-settings-nav-item svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Pro badge */
.listora-pro-badge {
	display: inline-block;
	margin-right: auto;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--listora-warning-fg);
	background: var(--listora-warning-bg);
	border-radius: 3px;
	text-transform: uppercase;
}

.listora-settings-nav-item.is-active .listora-pro-badge {
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	background: rgba(255, 255, 255, 0.25);
}

/* ── Content area ── */
.listora-settings-content {
	flex: 1;
	min-width: 0;
	padding: 24px;
}

/* Sections — hidden by default, shown when active */
.listora-settings-section {
	display: none;
}

.listora-settings-section.is-active {
	display: block;
}

/* ── Card ── */
.listora-card {
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	border-radius: 4px;
	overflow: hidden;
}

.listora-card__head {
	padding: 16px 20px;
	border-bottom: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
}

.listora-card__title {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: var(--listora-text, var(--listora-wp-admin-text));
}

.listora-card__desc {
	margin: 0;
	font-size: 13px;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-faint));
}

/*
 * ════════════════════════════════════════════════════════════════════
 * UNIFIED SETTINGS TAB CONTENT PATTERN
 * ════════════════════════════════════════════════════════════════════
 *
 * ALL settings tab content (Free AND Pro) is wrapped by the core settings
 * page in a single `.listora-settings-body` div that sits inside the
 * .listora-card body. This div provides the 20px uniform padding around
 * every tab's content regardless of what the renderer outputs.
 *
 * Tab renderers should output:
 *   <section class="listora-settings-block">
 *     <div class="listora-settings-block__head">
 *       <h3 class="listora-settings-block__title">Title</h3>
 *       <p class="listora-settings-block__desc">Description</p>
 *     </div>
 *     <table class="form-table" role="presentation"> ... </table>
 *   </section>
 *
 * Multiple sections per tab are separated by a 1px top border.
 * Renderers that emit bare <h3> + <table class="form-table"> still work
 * because the outer .listora-settings-body provides the padding.
 */

.listora-settings-body {
	padding: 20px;
}

/* Sections inside the body get uniform vertical spacing */
.listora-settings-body > .listora-settings-block + .listora-settings-block,
.listora-settings-body > h3 + h3 {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--listora-border, var(--listora-wp-admin-border));
}

/* Bare <h3> from renderers that don't use .listora-settings-block */
.listora-settings-body > h3 {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--listora-text, var(--listora-wp-admin-text));
}

/* Bare form-table inside body — no extra padding needed, body provides it */
.listora-settings-body > .form-table,
.listora-settings-body > h3 + .form-table {
	margin: 0;
}

.listora-settings-body > .form-table th,
.listora-settings-body > .form-table td {
	padding: 14px 0;
}

/* Paragraphs and generic divs from renderers sit inside the padded body */
.listora-settings-body > p,
.listora-settings-body > div:not(.listora-settings-block) {
	margin: 0 0 12px;
}

/*
 * .listora-settings-block (structured pattern used by free tabs).
 * Inside the body, blocks are transparent — no double borders.
 */
.listora-settings-body .listora-settings-block {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

.listora-settings-body .listora-settings-block__head {
	margin: 0 0 12px;
	padding: 0;
	border: none;
}

.listora-settings-body .listora-settings-block__title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--listora-text, var(--listora-wp-admin-text));
}

.listora-settings-body .listora-settings-block__desc {
	margin: 0;
	font-size: 13px;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-faint));
}

.listora-settings-body .listora-settings-block .form-table {
	margin: 0;
}

.listora-settings-body .listora-settings-block .form-table th,
.listora-settings-body .listora-settings-block .form-table td {
	padding: 14px 0;
}

/* Also apply when .listora-settings-pane is nested (legacy free tabs) */
.listora-settings-body > .listora-settings-pane {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Section footer / save ── */
.listora-settings-section__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0 0;
}

/* Button */
.listora-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}

.listora-btn svg {
	width: 16px;
	height: 16px;
}

.listora-btn--primary {
	background: var(--listora-primary, var(--listora-primary));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border-color: var(--listora-primary, var(--listora-primary));
}

.listora-btn--primary:hover {
	background: var(--listora-primary-hover, var(--listora-primary-hover));
	border-color: var(--listora-primary-hover, var(--listora-primary-hover));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

.listora-btn--primary:focus {
	box-shadow: 0 0 0 1px var(--listora-fg-inverse, var(--listora-bg-elevated)), 0 0 0 3px var(--listora-primary, var(--listora-primary));
}

/* ── Danger button (Reset to Defaults) ── */
.listora-btn--danger {
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
	color: var(--listora-danger);
	border-color: var(--listora-danger);
}

.listora-btn--danger:hover {
	background: var(--listora-danger);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border-color: var(--listora-danger);
}

.listora-btn--danger:focus {
	box-shadow: 0 0 0 1px var(--listora-fg-inverse, var(--listora-bg-elevated)), 0 0 0 3px var(--listora-danger);
}

/* ── Secondary button (Import/Export) ── */
.listora-btn--secondary {
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	color: var(--listora-primary, var(--listora-primary));
	border-color: var(--listora-primary, var(--listora-primary));
}

.listora-btn--secondary:hover {
	background: var(--listora-primary, var(--listora-primary));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border-color: var(--listora-primary, var(--listora-primary));
}

.listora-btn--secondary:focus {
	box-shadow: 0 0 0 1px var(--listora-fg-inverse, var(--listora-bg-elevated)), 0 0 0 3px var(--listora-primary, var(--listora-primary));
}

/* ── Help tooltips ── */
.listora-help-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--listora-fg-faint, var(--listora-wp-admin-text-faint));
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-faint));
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	position: relative;
	vertical-align: middle;
	margin-right: 4px;
	text-decoration: none;
}

.listora-help-tip:hover {
	border-color: var(--listora-primary, var(--listora-primary));
	color: var(--listora-primary, var(--listora-primary));
}

/* CSS-only tooltip using data-tip attribute: */
.listora-help-tip::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	right: 50%;
	transform: translateX(50%);
	background: var(--listora-text, var(--listora-wp-admin-text));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	padding: 8px 12px;
	border-radius: 4px;
	white-space: normal;
	width: 260px;
	max-width: 300px;
	z-index: 100;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s, visibility 0.15s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.listora-help-tip::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 2px);
	right: 50%;
	transform: translateX(50%);
	border: 6px solid transparent;
	border-top-color: var(--listora-text, var(--listora-wp-admin-text));
	z-index: 100;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s, visibility 0.15s;
}

.listora-help-tip:hover::after,
.listora-help-tip:hover::before,
.listora-help-tip:focus::after,
.listora-help-tip:focus::before {
	opacity: 1;
	visibility: visible;
}

/* ── Card head row (title + docs link) ── */
.listora-card__head-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.listora-card__head-row > div:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

/* ── Documentation link — always right-aligned ── */
.listora-docs-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--listora-primary, var(--listora-primary));
	text-decoration: none;
	white-space: nowrap;
	padding: 6px 10px;
	border: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	border-radius: 4px;
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
	flex-shrink: 0;
	margin-inline-start: auto;
	align-self: flex-start;
}

.listora-docs-link:hover {
	color: var(--listora-primary-hover, var(--listora-primary-hover));
	border-color: var(--listora-primary, var(--listora-primary));
	background: var(--listora-admin-bg-tint);
	text-decoration: none;
}

.listora-docs-link svg {
	width: 14px;
	height: 14px;
}

/* ── Settings saved notice override ── */
.listora-settings-wrap .notice {
	margin: 0 0 16px;
}

/* ── Responsive: sidebar collapses to horizontal ── */
@media screen and (max-width: 782px) {
	.listora-settings-wrap {
		flex-direction: column;
	}

	.listora-settings-sidebar {
		width: 100%;
		min-width: 0;
		flex-direction: column;
		border-left: none;
		border-bottom: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	}

	.listora-settings-sidebar__brand {
		padding: 16px;
	}

	.listora-settings-nav-group {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px;
		padding: 8px 16px 8px 8px;
	}

	.listora-settings-nav-group__label {
		padding: 0 0 0 8px;
		white-space: nowrap;
	}

	.listora-settings-nav-item {
		margin: 0;
		padding: 6px 12px;
	}

	.listora-settings-content {
		padding: 16px;
	}

	.listora-card__head-row {
		flex-direction: column;
		gap: 8px;
	}

	.listora-settings-section__footer {
		flex-direction: column-reverse;
		gap: 8px;
		align-items: stretch;
	}

	.listora-settings-section__footer .listora-btn {
		justify-content: center;
	}

	.listora-help-tip::after {
		right: auto;
		left: 0;
		transform: none;
		width: 200px;
	}

	.listora-help-tip::before {
		right: auto;
		left: 4px;
		transform: none;
	}
}

/* ── Responsive: phones — nav scrolls horizontally instead of wrapping ──
 *
 * RTL twin of the LTR rule. The nav scrolls toward the left, so the fade mask
 * sits on the left (start) edge to cue the clipped tab. Tap targets keep a
 * 40px min-height. */
@media (max-width: 640px) {
	.listora-settings-nav-group {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		-webkit-mask-image: linear-gradient(
			to left,
			rgb(0 0 0 / 1) calc(100% - var(--listora-space-6)),
			transparent 100%
		);
		mask-image: linear-gradient(
			to left,
			rgb(0 0 0 / 1) calc(100% - var(--listora-space-6)),
			transparent 100%
		);
	}

	.listora-settings-nav-group__label {
		flex-shrink: 0;
	}

	.listora-settings-nav-item {
		flex-shrink: 0;
		min-height: 40px;
		scroll-snap-align: start;
		white-space: nowrap;
	}
}

/* ────────────────────────────────────────────────────────────────────────
   Import / Export tab — clean 2-column card layout
   Replaces the previous mixed flex-row + form-table mess.
   ──────────────────────────────────────────────────────────────────────── */

.listora-impex {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.listora-impex .listora-impex__group-title {
	margin: 28px 0 4px;
	font-size: 16px;
	font-weight: 600;
	color: var(--listora-text, var(--listora-wp-admin-text));
	border: none;
	padding: 0;
}

.listora-impex .listora-impex__group-title:first-child {
	margin-top: 0;
}

.listora-impex__group-desc {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-faint));
}

.listora-impex__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 12px;
}

@media (max-width: 1024px) {
	.listora-impex__cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

.listora-impex__card {
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	border-radius: 8px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.listora-impex__card:hover {
	border-color: var(--listora-border-strong, var(--listora-border-strong));
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.listora-impex__card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.listora-impex__card-icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	background: var(--listora-admin-bg-tint);
	border-radius: 6px;
	color: var(--listora-primary, var(--listora-primary));
	flex: 0 0 auto;
}

.listora-impex__card-icon svg {
	width: 16px;
	height: 16px;
}

.listora-impex__card-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--listora-text, var(--listora-wp-admin-text));
}

.listora-impex__card-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-impex__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.listora-impex__field label {
	font-size: 11px;
	font-weight: 600;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.listora-impex__field select,
.listora-impex__field input[type="file"],
.listora-impex__card > input[type="file"] {
	width: 100%;
	max-width: 100%;
	padding: 6px 8px;
	font-size: 13px;
	border: 1px solid var(--listora-border-strong, var(--listora-border-strong));
	border-radius: 4px;
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
}

.listora-impex__field select:focus,
.listora-impex__field input[type="file"]:focus {
	outline: 2px solid var(--listora-primary, var(--listora-primary));
	outline-offset: -1px;
	border-color: transparent;
}

.listora-impex__checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	cursor: pointer;
	user-select: none;
}

.listora-impex__card-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 4px;
}

.listora-impex__status {
	font-size: 12px;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-faint));
	min-height: 16px;
}

.listora-impex__status.is-success {
	color: var(--listora-success-text, var(--listora-success-fg));
}

.listora-impex__status.is-error {
	color: var(--listora-danger-text, var(--listora-danger-fg));
}

/* WP-CLI collapsible footer */

.listora-impex__cli {
	margin: 16px 0 0;
	background: var(--listora-bg-surface, var(--listora-admin-bg-paper));
	border: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	border-radius: 8px;
	font-size: 13px;
}

.listora-impex__cli > summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--listora-text, var(--listora-wp-admin-text));
	user-select: none;
}

.listora-impex__cli > summary::-webkit-details-marker {
	display: none;
}

.listora-impex__cli > summary::after {
	content: "▾";
	margin-right: auto;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-faint));
	font-size: 12px;
	transition: transform 0.15s;
}

.listora-impex__cli[open] > summary::after {
	transform: rotate(-180deg);
}

.listora-impex__cli > summary svg {
	width: 16px;
	height: 16px;
	color: var(--listora-fg-faint, var(--listora-wp-admin-text-faint));
}

.listora-impex__cli ul {
	margin: 0;
	padding: 0 16px 14px 16px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.listora-impex__cli li {
	font-size: 12px;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-impex__cli code {
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	color: var(--listora-text, var(--listora-wp-admin-text));
	font-family: Menlo, Consolas, monospace;
	display: inline-block;
}