/* ── ECS JSON PowerEdit — Elementor AI–style UI ────────────────────────────── */

:root {
	--jpe-bg        : var(--e-a-bg-default,  #ffffff);
	--jpe-surface   : var(--e-a-bg-hover,    #f7f7f7);
	--jpe-text      : var(--e-a-color-txt-accent, #0c0d0e);
	--jpe-text-sec  : var(--e-a-color-txt,   #515962);
	--jpe-text-ter  : var(--e-a-color-txt-muted, #69727d);
	--jpe-border    : var(--e-a-border-color, #d5d8dc);
	--jpe-json-color: var(--e-a-color-txt-accent, #0c0d0e);
}

/* ── "Edit JSON" button injected into panel controls ───────────────────── */

.ecs-jpe-btn {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	gap             : 5px;
	width           : 100%;
	margin-top      : 8px;
	padding         : 0 10px;
	height          : 28px;
	background      : var(--e-a-bg-hover);
	border          : 1px solid var(--e-a-border-color);
	border-radius   : 3px;
	color           : var(--e-a-color-txt);
	font-size       : 12px;
	font-weight     : 500;
	font-family     : inherit;
	line-height     : 1;
	cursor          : pointer;
	white-space     : nowrap;
	transition      : background 0.15s, border-color 0.15s, color 0.15s;
	box-sizing      : border-box;
}

.ecs-jpe-btn:hover {
	background : var(--e-a-bg-active);
}

/* ── Modal overlay ──────────────────────────────────────────────────────── */

#ecs-jpe-modal {
	display         : none;
	position        : fixed;
	inset           : 0;
	z-index         : 999999;
	align-items     : center;
	justify-content : center;
}

#ecs-jpe-modal.ecs-jpe-open {
	display : flex;
}

.ecs-jpe-backdrop {
	position   : absolute;
	inset      : 0;
	background : transparent;
}

/* ── Dialog box ─────────────────────────────────────────────────────────── */

.ecs-jpe-dialog {
	position       : relative;
	z-index        : 1;
	display        : flex;
	flex-direction : column;
	width          : min(820px, 92vw);
	height         : min(580px, 86vh);
	max-height     : 86vh;
	background     : var(--jpe-bg);
	border-radius  : 4px;
	box-shadow     : 0px 11px 15px -7px rgba(0,0,0,.2),
	                 0px 24px 38px 3px rgba(0,0,0,.14),
	                 0px 9px 46px 8px rgba(0,0,0,.12);
	overflow       : hidden;
	color          : var(--jpe-text);
	font-family    : Roboto, Arial, Helvetica, sans-serif;
	font-size      : 13px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.ecs-jpe-header {
	display         : flex;
	align-items     : center;
	gap             : 8px;
	padding         : 12px 16px 10px;
	background      : var(--jpe-bg);
	border-bottom   : 1px solid var(--jpe-border);
	flex-shrink     : 0;
}

.ecs-jpe-header-icon {
	width           : 28px;
	height          : 28px;
	background      : #0c0d0e;
	border-radius   : 50%;
	display         : flex;
	align-items     : center;
	justify-content : center;
	flex-shrink     : 0;
	color           : #fff;
	font-size       : 11px;
	font-weight     : 700;
	letter-spacing  : -0.5px;
}

.ecs-jpe-title {
	font-size   : 13px;
	font-weight : 600;
	color       : var(--jpe-text);
}


.ecs-jpe-header-actions {
	display     : flex;
	align-items : center;
	margin-left : auto;
	flex-shrink : 0;
}

.ecs-jpe-close {
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 28px;
	height          : 28px;
	background      : transparent;
	border          : none;
	border-radius   : 50%;
	color           : var(--jpe-text-sec);
	font-size       : 16px;
	line-height     : 1;
	cursor          : pointer;
	transition      : background 0.15s, color 0.15s;
	padding         : 0;
}

.ecs-jpe-close:hover {
	background : var(--e-a-bg-active, rgba(0,0,0,.06));
	color      : var(--jpe-text);
}

/* ── Meta info ──────────────────────────────────────────────────────────── */

.ecs-jpe-meta {
	padding         : 6px 16px;
	font-size       : 11px;
	color           : var(--jpe-text-ter);
	background      : var(--jpe-surface);
	border-bottom   : 1px solid var(--jpe-border);
	flex-shrink     : 0;
	font-family     : 'Courier New', Courier, monospace;
}

/* ── Textarea ───────────────────────────────────────────────────────────── */

.ecs-jpe-textarea {
	flex        : 1;
	min-height  : 300px;
	padding     : 14px 16px;
	background  : var(--jpe-surface);
	border      : none;
	color       : var(--jpe-json-color);
	font-family : 'Courier New', Courier, monospace;
	font-size   : 13px;
	line-height : 1.6;
	resize      : none;
	outline     : none;
	overflow-y  : auto;
}

.ecs-jpe-textarea:focus {
	background : var(--e-a-bg-active, #f5f5f5);
}

/* ── Error message ──────────────────────────────────────────────────────── */

.ecs-jpe-error {
	display     : none;
	padding     : 8px 16px;
	background  : #fff5f5;
	border-top  : 1px solid #fecaca;
	color       : #dc2626;
	font-size   : 12px;
	flex-shrink : 0;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */

.ecs-jpe-toolbar {
	display      : flex;
	gap          : 8px;
	padding      : 10px 16px;
	background   : var(--jpe-bg);
	border-top   : 1px solid var(--jpe-border);
	flex-shrink  : 0;
}

.ecs-jpe-action {
	padding       : 6px 14px;
	background    : var(--jpe-bg);
	border        : 1px solid var(--jpe-border);
	border-radius : 4px;
	color         : var(--jpe-text-sec);
	font-size     : 12px;
	font-family   : Roboto, Arial, Helvetica, sans-serif;
	cursor        : pointer;
	transition    : background 0.15s, color 0.15s, border-color 0.15s;
}

.ecs-jpe-action:hover {
	background   : var(--jpe-surface);
	color        : var(--jpe-text);
	border-color : var(--jpe-border);
}

/* Apply button */
.ecs-jpe-apply {
	margin-left  : auto;
	background   : #f0abfc;
	border-color : #f0abfc;
	color        : #0c0d0e;
	font-weight  : 600;
}

.ecs-jpe-apply:hover {
	background   : #e879f9;
	border-color : #e879f9;
	color        : #0c0d0e;
}

.ecs-jpe-action--active {
	background   : #f3e8ff;
	border-color : #c084fc;
	color        : #7e22ce;
}

/* ── Tree toolbar ───────────────────────────────────────────────────────── */

.ecs-jpe-tree-toolbar {
	display      : flex;
	gap          : 6px;
	padding      : 6px 16px;
	background   : var(--jpe-surface);
	border-bottom: 1px solid var(--jpe-border);
	flex-shrink  : 0;
}

.ecs-jpe-tree-toolbar .ecs-jpe-action {
	padding   : 3px 10px;
	height    : auto;
	font-size : 11px;
}

/* ── Tree view ──────────────────────────────────────────────────────────── */

.ecs-jpe-tree {
	flex       : 1;
	overflow-y : auto;
	padding    : 10px 12px;
	background : var(--jpe-surface);
	font-family: 'Courier New', Courier, monospace;
	font-size  : 12.5px;
	line-height: 1.6;
}

.ecs-jpe-tree-empty {
	color     : var(--jpe-text-ter);
	font-style: italic;
	padding   : 8px 0;
}

/* Node (collapsible object/array) */
.ecs-jpe-tn {
	padding-left : var(--jpe-indent, 0px);
}

.ecs-jpe-tn-row {
	display     : flex;
	align-items : baseline;
	gap         : 3px;
	min-height  : 22px;
	cursor      : default;
}

.ecs-jpe-tn-row:hover {
	background    : rgba(0,0,0,.03);
	border-radius : 3px;
}

.ecs-jpe-tn-toggle {
	background  : none;
	border      : none;
	padding     : 0 2px;
	cursor      : pointer;
	color       : var(--jpe-text-ter);
	font-size   : 10px;
	line-height : 1;
	flex-shrink : 0;
	transition  : color .1s;
}

.ecs-jpe-tn-toggle:hover { color: var(--jpe-text); }

.ecs-jpe-tn-key {
	color       : #1d4ed8;
	font-weight : 600;
	flex-shrink : 0;
}

.ecs-jpe-tn-sep {
	color       : var(--jpe-text-ter);
	flex-shrink : 0;
}

.ecs-jpe-tn-count {
	font-size  : 10px;
	color      : var(--jpe-text-ter);
	margin-left: 4px;
	flex-shrink: 0;
}

.ecs-jpe-tn-preview {
	font-size   : 11px;
	color       : var(--jpe-text-ter);
	margin-left : 6px;
	display     : none;
	overflow    : hidden;
	text-overflow: ellipsis;
	white-space : nowrap;
	max-width   : 200px;
}

.ecs-jpe-tn-children {
	border-left : 1px dashed var(--jpe-border);
	margin-left : 6px;
}

.ecs-jpe-tn-close {
	padding-left : var(--jpe-indent, 0px);
	color        : var(--jpe-text-ter);
	font-size    : 11px;
}

/* Leaf (primitive) */
.ecs-jpe-tl {
	display      : flex;
	align-items  : baseline;
	gap          : 3px;
	padding-left : calc( var(--jpe-indent, 0px) + 14px );
	min-height   : 22px;
}

.ecs-jpe-tl:hover {
	background    : rgba(0,0,0,.03);
	border-radius : 3px;
}

/* Value types */
.ecs-jpe-tv-str  { color: #16a34a; }
.ecs-jpe-tv-num  { color: #2563eb; }
.ecs-jpe-tv-bool { color: #9333ea; }
.ecs-jpe-tv-null { color: #6b7280; font-style: italic; }
.ecs-jpe-tv-meta { color: #9ca3af; font-weight: 600; }