/* ─── App Shell ───────────────────────────────────────────────────────────── */

.rawtype-oe-admin-wrap {
	margin: var(--rwt-space-xl) var(--rwt-space-xl) 0 0;
	max-width: 980px;
}

.rawtype-oe-settings-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rwt-space-lg);
}

/* ─── Export Page (wizard container) ──────────────────────────────────────── */

.roe-export-page {
	display: grid;
	gap: var(--rwt-space-xl);
}

.roe-export-page-content {
	min-height: 200px;
}

/* ─── Wizard Stepper (mobile fallback only — desktop handled by @rawtype/ui Stepper) */

.roe-wizard-stepper-mobile {
	display: none;
	padding: var(--rwt-space-md) 0;
	font-family: var(--rwt-font-family);
	font-size: var(--rwt-font-size-sm);
	font-weight: var(--rwt-font-weight-medium);
	color: var(--rwt-color-text-secondary);
}

.roe-wizard-stepper-mobile-label {
	display: block;
	margin-bottom: var(--rwt-space-sm);
}

.roe-wizard-mobile-progress {
	margin-top: 0;
}

@media (max-width: 768px) {
	.roe-wizard-stepper-mobile {
		display: block;
	}
}

/* ─── Entity Selector ────────────────────────────────────────────────────── */

.roe-entity-selector {
	display: grid;
	gap: var(--rwt-space-xl);
}

.roe-entity-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--rwt-space-lg);
}

.roe-entity-card {
	cursor: pointer;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.roe-entity-card:hover {
	box-shadow: var(--rwt-shadow-lg);
	transform: translateY(-2px);
}

.roe-entity-card--selected {
	box-shadow: var(--rwt-shadow-lg);
	outline: 2px solid var(--rwt-color-accent);
	outline-offset: -2px;
	border-radius: var(--rwt-border-radius);
}

.roe-entity-card--empty {
	opacity: 0.5;
}

.roe-entity-card--cross {
	background: var(--rwt-color-bg-subtle);
}

.roe-entity-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: var(--rwt-color-bg-subtle);
	border-radius: var(--rwt-border-radius-sm);
	font-size: 20px;
	color: var(--rwt-color-text);
	margin-bottom: var(--rwt-space-sm);
}

.roe-entity-card--selected .roe-entity-card-icon {
	background: var(--rwt-color-bg-invert);
	color: var(--rwt-color-text-invert);
}

.roe-entity-card-badge {
	margin-left: var(--rwt-space-sm);
	vertical-align: middle;
}

.roe-entity-card-subtitle {
	margin-top: 4px;
}

.roe-entity-card-count {
	margin-top: var(--rwt-space-md);
}

.roe-entity-card-empty-text {
	margin: var(--rwt-space-sm) 0 0;
	font-size: var(--rwt-font-size-xs);
	color: var(--rwt-color-text-muted);
}

.roe-entity-actions {
	display: flex;
	justify-content: flex-end;
}

/* ─── Filter Builder (Card-based) ────────────────────────────────────────── */

.roe-filter-builder-content {
	display: grid;
	gap: var(--rwt-space-xl);
}

.roe-filter-title {
	display: inline-flex;
	align-items: center;
	gap: var(--rwt-space-sm);
}

.roe-filter-title-count {
	flex-shrink: 0;
}

.roe-filter-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rwt-space-md);
}

.roe-filter-logic {
	display: flex;
	align-items: center;
	gap: var(--rwt-space-md);
	padding: var(--rwt-space-sm) var(--rwt-space-lg);
	background: var(--rwt-color-bg-subtle);
	border-radius: var(--rwt-border-radius-sm);
}

.roe-filter-logic>span {
	font-size: var(--rwt-font-size-sm);
	color: var(--rwt-color-text-secondary);
	white-space: nowrap;
}

.roe-filter-chips {
	display: grid;
	gap: var(--rwt-space-md);
}

.roe-filter-count-inline {
	font-weight: var(--rwt-font-weight-semibold);
	color: var(--rwt-color-accent);
	transition: opacity 0.2s ease;
}

.roe-filter-count-inline--loading {
	opacity: 0.5;
}

.roe-filter-count-inline--error {
	color: var(--rwt-color-error);
}

.roe-filter-actions {
	justify-content: space-between;
}

/* Filter menu pro badge */
.roe-filter-menu-pro-badge {
	margin-left: auto;
}

/* Shared filter select sizing */
.roe-filter-select {
	min-width: 160px;
}

/* ─── Filter Chip ────────────────────────────────────────────────────────── */

.roe-filter-chip-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rwt-space-sm);
	padding: var(--rwt-space-md) var(--rwt-space-lg);
	border-bottom: var(--rwt-divider);
	background: var(--rwt-color-bg-subtle);
}

.roe-filter-chip-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--rwt-space-sm);
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--rwt-font-family);
	font-size: var(--rwt-font-size-sm);
	color: inherit;
}

.roe-filter-chip-toggle:hover {
	opacity: 0.8;
}

.roe-filter-chip-summary {
	color: var(--rwt-color-text-secondary);
	font-size: var(--rwt-font-size-xs);
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.roe-filter-chip-remove {
	flex-shrink: 0;
}

.roe-filter-chip-editor {
	padding: var(--rwt-space-lg) var(--rwt-space-xl);
}

/* ─── Date Filter Editor ─────────────────────────────────────────────────── */

.roe-date-filter {
	display: grid;
	gap: var(--rwt-space-lg);
}

.roe-date-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rwt-space-md);
}

.roe-date-filter-range {
	display: flex;
	align-items: center;
	gap: var(--rwt-space-sm);
}

.roe-date-separator {
	color: var(--rwt-color-text-muted);
	font-size: var(--rwt-font-size-md);
	flex-shrink: 0;
	padding: 0 var(--rwt-space-xs);
}

.roe-date-presets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rwt-space-sm);
}

/* ─── Status Filter Editor ───────────────────────────────────────────────── */

.roe-status-filter {
	display: grid;
	gap: var(--rwt-space-md);
}

/* ─── Category Filter Editor ─────────────────────────────────────────────── */

.roe-category-filter {
	display: grid;
	gap: var(--rwt-space-md);
}

.roe-category-tree {
	display: grid;
	gap: var(--rwt-space-xs);
}

.roe-category-node {
	display: grid;
	gap: var(--rwt-space-xs);
}

.roe-category-option {
	display: inline-flex;
	align-items: center;
	gap: var(--rwt-space-sm);
	padding: var(--rwt-space-xs) var(--rwt-space-md);
	border-radius: var(--rwt-border-radius-sm);
	cursor: pointer;
	transition: background 0.15s ease;
	user-select: none;
}

.roe-category-option:hover {
	background: var(--rwt-color-bg-subtle);
}

.roe-category-option--checked {
	background: var(--rwt-color-bg-subtle);
	font-weight: var(--rwt-font-weight-medium);
}

.roe-category-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--rwt-color-text-muted);
	border-radius: var(--rwt-border-radius-sm);
	transition: transform 0.15s ease, color 0.15s ease;
	flex-shrink: 0;
}

.roe-category-toggle .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.roe-category-toggle--open {
	transform: rotate(90deg);
}

.roe-category-toggle:hover {
	color: var(--rwt-color-text);
}

.roe-category-count {
	flex-shrink: 0;
	margin-left: auto;
}

/* ─── Tag Filter Editor ──────────────────────────────────────────────────── */

.roe-tag-filter {
	display: grid;
	gap: var(--rwt-space-md);
}

/* ─── Product Filter Editor ──────────────────────────────────────────────── */

.roe-product-filter {
	display: grid;
	gap: var(--rwt-space-md);
}

.roe-product-search {
	display: grid;
	gap: var(--rwt-space-sm);
}

.roe-product-results {
	display: grid;
	gap: 0;
	max-height: 240px;
	overflow-y: auto;
	border: var(--rwt-divider-strong);
	border-radius: var(--rwt-border-radius-sm);
	background: var(--rwt-color-bg-elevated);
}

.roe-product-result {
	display: flex;
	align-items: center;
	gap: var(--rwt-space-md);
	padding: var(--rwt-space-md) var(--rwt-space-lg);
	border: none;
	border-bottom: var(--rwt-divider);
	border-radius: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--rwt-font-family);
	font-size: var(--rwt-font-size-sm);
	color: var(--rwt-color-text);
	width: 100%;
	transition: background 0.12s ease;
}

.roe-product-result:last-child {
	border-bottom: none;
}

.roe-product-result:hover:not(:disabled) {
	background: var(--rwt-color-bg-subtle);
}

.roe-product-result:disabled {
	opacity: 0.5;
	cursor: default;
}

.roe-product-result--selected {
	background: var(--rwt-color-bg-subtle);
}

.roe-product-result-name {
	flex: 1;
	font-weight: var(--rwt-font-weight-medium);
}

.roe-product-result-sku {
	color: var(--rwt-color-text-muted);
	font-family: var(--rwt-font-family-mono);
	font-size: var(--rwt-font-size-xs);
	flex-shrink: 0;
}

.roe-product-result-price {
	color: var(--rwt-color-text-secondary);
	font-weight: var(--rwt-font-weight-semibold);
	flex-shrink: 0;
}

.roe-product-selected {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rwt-space-sm);
}

.roe-product-selected-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	margin-left: var(--rwt-space-xs);
	border: none;
	border-radius: var(--rwt-border-radius-pill);
	background: rgba(255, 255, 255, 0.2);
	color: inherit;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease;
}

.roe-product-selected-remove:hover {
	background: rgba(255, 255, 255, 0.35);
}

/* ─── SKU Filter Editor ──────────────────────────────────────────────────── */

.roe-sku-filter {
	display: grid;
	gap: var(--rwt-space-md);
}

.roe-sku-mode {
	display: flex;
	align-items: center;
}

.roe-sku-mode-label {
	display: inline-flex;
	align-items: center;
	gap: var(--rwt-space-sm);
	cursor: pointer;
}

/* ─── Numeric Filter Editor ──────────────────────────────────────────────── */

.roe-numeric-filter {
	display: grid;
	gap: var(--rwt-space-md);
}

.roe-numeric-filter-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rwt-space-md);
}

.roe-numeric-filter-range {
	display: flex;
	align-items: center;
	gap: var(--rwt-space-sm);
}

.roe-numeric-separator {
	color: var(--rwt-color-text-muted);
	font-size: var(--rwt-font-size-md);
	flex-shrink: 0;
	padding: 0 var(--rwt-space-xs);
}

/* ─── Cross-Entity Config ────────────────────────────────────────────────── */

.roe-cross-entity-config {
	padding: var(--rwt-space-xl);
	background: var(--rwt-color-bg-elevated);
	border-radius: var(--rwt-border-radius);
	box-shadow: var(--rwt-shadow);
}

.roe-cross-entity-primary {
	margin-bottom: var(--rwt-space-lg);
}

.roe-cross-entity-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--rwt-space-sm);
}

.roe-cross-entity-related-item {
	padding: var(--rwt-space-md) var(--rwt-space-lg);
	background: var(--rwt-color-bg-subtle);
	border-radius: var(--rwt-border-radius-sm);
}

/* ─── Column Selector (Single-panel: chips + tabs + grid) ────────────────── */

.roe-column-selector-layout {
	display: grid;
	gap: var(--rwt-space-md);
}

/* ── Chips Bar ── */

.roe-chips-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rwt-space-xs);
	padding: var(--rwt-space-sm) var(--rwt-space-md);
	background: var(--rwt-color-bg-subtle);
	border-radius: var(--rwt-border-radius-sm);
	min-height: 40px;
	max-height: 160px;
	overflow-y: auto;
}

.roe-chips-empty {
	font-size: var(--rwt-font-size-sm);
	color: var(--rwt-color-text-muted);
	padding: var(--rwt-space-xs) 0;
}

.roe-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--rwt-space-xs);
	padding: 3px var(--rwt-space-sm);
	background: var(--rwt-color-bg-elevated);
	border: var(--rwt-border-width) solid var(--rwt-color-border);
	border-radius: var(--rwt-border-radius-pill);
	font-family: var(--rwt-font-family);
	font-size: var(--rwt-font-size-xs);
	font-weight: var(--rwt-font-weight-medium);
	color: var(--rwt-color-text);
	cursor: pointer;
	user-select: none;
	transition: box-shadow 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
	white-space: nowrap;
}

.roe-chip:hover {
	box-shadow: var(--rwt-shadow-sm);
}

.roe-chip--dragging {
	opacity: 0.4;
	transform: scale(0.95);
}

.roe-chip--dragover {
	box-shadow: -2px 0 0 0 var(--rwt-color-accent);
}

.roe-chip-label {
	line-height: 1.3;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.roe-chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	background: none;
	color: var(--rwt-color-text-muted);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--rwt-border-radius-pill);
	transition: background 0.12s ease, color 0.12s ease;
}

.roe-chip-remove:hover {
	background: var(--rwt-color-bg-muted);
	color: var(--rwt-color-error);
}

/* ── Chip Rename Popover ── */

.roe-chip-rename-popover {
	min-width: 220px;
}

.roe-chip-rename-content {
	display: grid;
	gap: var(--rwt-space-xs);
}

.roe-chip-rename-label {
	font-size: var(--rwt-font-size-xs);
	font-weight: var(--rwt-font-weight-semibold);
}

.roe-chip-rename-hint {
	font-size: var(--rwt-font-size-xs);
	color: var(--rwt-color-text-muted);
}

/* ── Toolbar ── */

.roe-column-toolbar {
	display: flex;
	align-items: center;
	gap: var(--rwt-space-sm);
}

.roe-column-search {
	flex: 1;
	min-width: 0;
	max-width: none;
}

.roe-column-toolbar-right {
	display: inline-flex;
	align-items: center;
	gap: var(--rwt-space-sm);
	flex-shrink: 0;
}

.roe-column-toolbar-label {
	font-size: var(--rwt-font-size-sm);
	white-space: nowrap;
}

.roe-column-toolbar-bulk {
	display: flex;
	align-items: center;
	gap: var(--rwt-space-xs);
}

/* ── Category Tabs ── */

.roe-column-tabs {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.roe-column-tabs-group {
	width: 100%;
}

.roe-column-tab-item {
	justify-content: space-between !important;
}

.roe-column-tab-label {
	text-align: left;
}

/* ── Column Grid ── */

.roe-column-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rwt-space-xs) var(--rwt-space-lg);
	max-height: 400px;
	overflow-y: auto;
	padding: var(--rwt-space-xs) 0;
	transition: opacity var(--rwt-transition);
}

.roe-column-grid--refreshing {
	opacity: 0.5;
	pointer-events: none;
}

.roe-column-grid-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--rwt-space-xl) 0;
	color: var(--rwt-color-text-muted);
	font-size: var(--rwt-font-size-sm);
}

.roe-column-grid-item {
	display: flex;
	align-items: center;
	gap: var(--rwt-space-sm);
	padding: var(--rwt-space-xs) var(--rwt-space-sm);
	border-radius: var(--rwt-border-radius-sm);
	transition: background 0.12s ease;
	cursor: pointer;
	user-select: none;
}

.roe-column-grid-item-label {
	flex: 1;
	min-width: 0;
	font-family: var(--rwt-font-family);
	font-size: var(--rwt-font-size-base);
	color: var(--rwt-color-text);
}

.roe-column-grid-item--selected {
	background: var(--rwt-color-accent-subtle);
}

.roe-column-grid-item:hover {
	background: var(--rwt-color-bg-subtle);
}

.roe-column-grid-item--selected:hover {
	background: var(--rwt-color-accent-subtle);
}

.roe-column-pro-badge {
	flex-shrink: 0;
}

.roe-column-source-badge {
	flex-shrink: 0;
}

.roe-column-serialized-hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	background: var(--rwt-color-bg-muted);
	border-radius: var(--rwt-border-radius-pill);
	font-size: 11px;
	font-weight: 700;
	color: var(--rwt-color-text-secondary);
	cursor: help;
}

.roe-column-title-count {
	margin-left: var(--rwt-space-xs);
}

.roe-column-actions {
	justify-content: space-between;
}

/* ── Responsive ── */

@media (max-width: 768px) {
	.roe-column-grid {
		grid-template-columns: 1fr;
	}

	.roe-column-toolbar {
		flex-wrap: wrap;
	}

	.roe-column-search {
		width: 100%;
	}

	.roe-column-tabs {
		scrollbar-width: none;
	}

	.roe-column-tabs::-webkit-scrollbar {
		display: none;
	}
}


/* ─── Data Preview (Card-based) ──────────────────────────────────────────── */

.roe-preview-content {
	display: grid;
	gap: var(--rwt-space-xl);
}

.roe-preview-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--rwt-border-radius-sm);
	border: var(--rwt-divider);
}

.roe-preview-table-wrap td,
.roe-preview-table-wrap th {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.roe-preview-separator {
	margin: 0;
}

.roe-preview-export-section {
	display: grid;
	gap: var(--rwt-space-lg);
	padding: var(--rwt-space-xl);
	background: var(--rwt-color-bg-subtle);
	border-radius: var(--rwt-border-radius-sm);
}

.roe-preview-export-title {
	font-size: var(--rwt-font-size-md);
}

.roe-preview-export-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rwt-space-md);
}

.roe-preview-actions {
	justify-content: space-between;
}

.roe-multisheet-options {
	display: grid;
	gap: var(--rwt-space-md);
	padding: var(--rwt-space-lg);
	background: var(--rwt-color-bg-elevated);
	border-radius: var(--rwt-border-radius-sm);
	box-shadow: var(--rwt-shadow-sm);
}

.roe-multisheet-options h5 {
	margin: 0;
	font-family: var(--rwt-font-family);
	font-size: var(--rwt-font-size-sm);
	font-weight: var(--rwt-font-weight-semibold);
	color: var(--rwt-color-text);
}

.roe-multisheet-group-field {
	max-width: 280px;
}

.roe-cross-preview-loading-text {
	margin-top: var(--rwt-space-md);
	font-size: var(--rwt-font-size-sm);
	color: var(--rwt-color-text-secondary);
}

/* ─── Template Library ───────────────────────────────────────────────────── */

.roe-template-library {
	display: grid;
	gap: var(--rwt-space-xl);
}

.roe-template-library__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rwt-space-lg);
}

.roe-template-library__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--rwt-space-lg);
}

/* ─── Template Card ─────────────────────────────────────────────────────── */

.roe-template-card {
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--rwt-transition);
}

.roe-template-card:hover {
	box-shadow: var(--rwt-shadow-lg);
}

.roe-template-card__header {
	display: flex;
	align-items: center;
	gap: var(--rwt-space-md);
	padding-bottom: 0;
}

.roe-template-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	background: var(--rwt-color-bg-subtle);
	border-radius: var(--rwt-border-radius-sm);
	font-size: 18px;
	color: var(--rwt-color-text);
}

.roe-template-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--rwt-space-md);
	padding-top: var(--rwt-space-sm);
	padding-bottom: var(--rwt-space-lg);
}

.roe-template-card__desc {
	margin: 0;
	font-family: var(--rwt-font-family);
	font-size: var(--rwt-font-size-sm);
	line-height: var(--rwt-line-height);
	color: var(--rwt-color-text-secondary);
}

.roe-template-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rwt-space-xs);
}

.roe-template-card__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--rwt-space-sm);
}

/* ─── Profile Manager ────────────────────────────────────────────────────── */

.roe-profile-manager {
	display: grid;
	gap: var(--rwt-space-xl);
}

.roe-profile-manager__header {
	display: grid;
	gap: var(--rwt-space-xs);
}

.roe-profile-table__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--rwt-space-xs);
}

/* ─── Shared: Dialog Actions ─────────────────────────────────────────────── */

.roe-dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--rwt-space-sm);
	margin-top: var(--rwt-space-lg);
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
	.rawtype-oe-admin-wrap {
		margin: var(--rwt-space-md) var(--rwt-space-md) 0 0;
	}

	.roe-filter-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.roe-filter-logic {
		justify-content: center;
	}

	.roe-date-filter-row {
		flex-direction: column;
		align-items: stretch;
	}

	.roe-date-filter-range {
		flex-direction: column;
		align-items: stretch;
	}

	.roe-date-separator,
	.roe-numeric-separator {
		text-align: center;
	}

	.roe-numeric-filter-row {
		flex-direction: column;
		align-items: stretch;
	}

	.roe-numeric-filter-range {
		flex-direction: column;
		align-items: stretch;
	}

	.roe-preview-export-row {
		flex-direction: column;
		align-items: stretch;
	}

	.roe-template-library__toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.roe-template-library__grid {
		grid-template-columns: 1fr;
	}

	.roe-entity-cards {
		grid-template-columns: 1fr;
	}

	.roe-product-result {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--rwt-space-xs);
	}
}
