/* New Region Editor CSS (isolated, minimal) */

:root {
	--re-bg-panel: #1e1e1e;
	--re-text: #ffffff;
	--re-border: #333333;
	--re-bg-control: #2b2b2b;
	--re-bg-control-active: #3a3a3a;
	--re-danger: #7a2b2b;
	--re-danger-border: #8a3a3a;
}

.region-editor-panel-new {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 2001;
	background: var(--re-bg-panel);
	color: var(--re-text);
	border: 1px solid var(--re-border);
	border-radius: 0px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	padding: 10px 12px;
	min-width: 360px;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Tool selector (mimics old editor) */
.region-editor-panel-new .re-tool-selector { background: #D9DDE0; border-radius: 7px; padding: 3px; display: flex; gap: 0; }
.region-editor-panel-new .re-tool-button { flex: 1; border: none; background: transparent; border-radius: 5px; padding: 6px 0; font-size: 13px; font-weight: 500; color: #4B5260; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 6px; transition: all 0.2s ease-in-out; }
.region-editor-panel-new .re-tool-button.active { background: #FFFFFF; color: #3B82F6; box-shadow: 0 1px 2px rgba(0,0,0,0.1); font-weight: 600; }

/* Select tool settlement editor styles */
.region-editor-panel-new .re-section-title { font-size: 12px; font-weight: 600; color: #6B7280; letter-spacing: 0.02em; margin: 8px 0 0px 0; text-transform: uppercase; }
.region-editor-panel-new .re-card { background:#ffffff; border:1px solid #E5E7EB; border-radius: 8px; padding: 12px; }
.region-editor-panel-new .re-card.re-card-narrow { max-width: 68%; margin-left: auto; margin-right: auto; }
.region-editor-panel-new .re-grid-narrow { max-width: 68%; margin-left: auto; margin-right: auto; }
.region-editor-panel-new .re-form { display:grid; gap: 10px; }
.region-editor-panel-new .re-form-row { display:grid; grid-template-columns: 32px 1fr; align-items:center; gap:10px; }
.region-editor-panel-new .re-form-row label { font-size: 11px; color:#4B5563; font-weight:600; }
.region-editor-panel-new .re-row-inline { display:flex; align-items:center; gap:10px; }
.region-editor-panel-new .re-row-inline > label { white-space:nowrap; min-width:fit-content; font-size:11px; color:#4B5563; font-weight:600; }
.region-editor-panel-new .re-row-inline > *:not(label) { flex:1 1 auto; }
.region-editor-panel-new .re-input { width:100%; padding:8px 10px; background:#FFFFFF; color:#111827; border:1px solid #E5E7EB; border-radius: 5px; font-size:11.5px; }
.region-editor-panel-new input[type="text"],
.region-editor-panel-new input,
.region-editor-panel-new textarea { -webkit-text-size-adjust: 100%; -webkit-user-modify: read-write-plaintext-only; }
.region-editor-panel-new .re-type-palette { display:flex; gap:10px; }
.region-editor-panel-new .re-type-btn { display:flex; align-items:center; justify-content:center; gap:4px; background:#FFFFFF; border:1px solid #E5E7EB; border-radius:5px; padding:6px 10px; cursor:pointer; font-size:11px; color:#111827; box-shadow:none; flex:1 1 0; }
.region-editor-panel-new .re-type-btn.active { box-shadow:0 0 0 2px #3B82F6; border-color:#3B82F6; }
.region-editor-panel-new .re-type-btn svg { width:16px; height:16px; }
.region-editor-panel-new .re-actions { display:flex; gap:12px; margin-top:14px; }
.region-editor-panel-new .re-btn { display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 16px; border-radius:5px; font-size:13px; font-weight:600; cursor:pointer; border:1px solid transparent; background:#FFFFFF; flex:1; }
.region-editor-panel-new .re-btn.destructive, .region-editor-panel-new .re-btn.secondary { background:#FFFFFF; }
.region-editor-panel-new .re-btn.destructive { color:#DC2626; border-color:#FCA5A5; }
.region-editor-panel-new .re-btn.secondary { color:#374151; border-color:#D1D5DB; }
.region-editor-panel-new .re-btn.primary { color:#FFFFFF; background:#3B82F6; border-color:#3B82F6; }

/* Delete confirmation modal (panel-centered, simplified) */
.region-editor-panel-new .re-delete-modal { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.25); z-index:50; }
.region-editor-panel-new .re-delete-card { background:#FFFFFF; border:1px solid #E5E7EB; border-radius:8px; box-shadow:0 10px 25px rgba(0,0,0,0.15); width:80%; min-width:240px; max-width:none; color:#1F2937; }
.region-editor-panel-new .re-delete-card header { padding:16px 20px 12px 20px; border-bottom:1px solid #E5E7EB; font-size:16px; font-weight:600; text-align:center; }
.region-editor-panel-new .re-delete-card main { padding:16px 20px; font-size:14px; justify-content:center; text-align:center; }
.region-editor-panel-new .re-delete-card footer { padding:12px 20px 16px 20px; display:flex; gap:8px; justify-content:center; }
.region-editor-panel-new .re-modal-btn { padding:8px 16px; border:1px solid; border-radius:4px; font-size:13px; font-weight:500; cursor:pointer; }
.region-editor-panel-new .re-modal-btn.cancel { background:#FFFFFF; border-color:#D1D5DB; color:#374151; }
.region-editor-panel-new .re-modal-btn.confirm { background:#DC2626; border-color:#DC2626; color:#FFFFFF; }

/* Ensure old-editor global rule doesn't hide our POI select */
.region-editor-panel-new .poi-type-select { display: block; font-size: 11.5px; }

/* Custom POI dropdown (mirrors old editor, simplified) */
.region-editor-panel-new .re-poi-select { position: relative; width: 100%; }
.region-editor-panel-new .re-poi-selected { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 10px; border:1px solid #E5E7EB; border-radius:5px; background:#FFFFFF; color:#111827; cursor:pointer; font-size:11.5px; box-sizing:border-box; }
.region-editor-panel-new .re-poi-selected .label { display:flex; align-items:center; gap:6px; }
.region-editor-panel-new .re-poi-chevron { font-size:20px; color:#6B7280; transition: transform 0.15s ease; line-height:1; }
.region-editor-panel-new .re-poi-select.open .re-poi-chevron { transform: rotate(180deg); }
.region-editor-panel-new .re-poi-select.choice-active .re-poi-selected { box-shadow:0 0 0 2px #3B82F6; border-color:#3B82F6; }
.region-editor-panel-new .re-poi-dropdown { position:absolute; top:100%; left:0; right:0; background:#FFFFFF; border:1px solid #E5E7EB; border-top:none; border-radius:0 0 8px 8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); z-index:100; max-height:260px; overflow-y:auto; }
.region-editor-panel-new .re-poi-group { padding:6px 10px; font-size:11px; font-weight:600; color:#6B7280; background:#F3F4F6; border-bottom:1px solid #E5E7EB; }
.region-editor-panel-new .re-poi-option { display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:11.5px; cursor:pointer; border-bottom:1px solid #f0f0f0; }
.region-editor-panel-new .re-poi-option:hover { background:#F8F9FA; }
.region-editor-panel-new .re-poi-option.active { background:#F0F7FF; color:#3B82F6; font-weight:600; }
.region-editor-panel-new .re-poi-option svg { width:16px; height:16px; flex-shrink:0; }

.region-editor-panel-new .re-btn {
	background: var(--re-bg-control);
	color: var(--re-text);
	border: 1px solid var(--re-border);
	border-radius: 6px;
	padding: 8px;
	cursor: pointer;
	text-align: left;
}

.region-editor-panel-new .re-btn.active {
	background: var(--re-bg-control-active);
}

.region-editor-panel-new .re-btn.danger {
	background: var(--re-danger);
	border-color: var(--re-danger-border);
}

.region-editor-panel-new input,
.region-editor-panel-new select {
	background: var(--re-bg-control);
	color: var(--re-text);
	border: 1px solid var(--re-border);
	border-radius: 4px;
	padding: 6px;
}

.region-editor-panel-new input[type="range"] {
	padding: 0;
}

/* Minimal custom slider styling for label Size control */
.region-editor-panel-new input.re-slider {
	-webkit-appearance: none;
	appearance: none;
	height: 8px;
	border-radius: 8px;
	background: #ECECEC;
	border: 1px solid #DEDEDE; /* slightly darker than fill */
	outline: none;
	accent-color: #4B5563; /* progress fill color */
}

.region-editor-panel-new input.re-slider::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 8px;
	background: #ECECEC;
	border: 1px solid #DEDEDE;
}
.region-editor-panel-new input.re-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #FFFFFF; /* inner white */
	border: 3px solid #6B7583; /* dark grey ring */
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	margin-top: -8px; /* center thumb vertically over 8px track */
}
.region-editor-panel-new input.re-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 8px solid #4B5563;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    /* Firefox centers the thumb automatically; ensure track/height matches */
}

.region-editor-panel-new input.re-slider::-moz-range-track {
	height: 8px;
	border-radius: 8px;
	background: #ECECEC;
	border: 1px solid #DEDEDE;
}
.region-editor-panel-new input.re-slider::-moz-range-progress {
	background-color: #4B5563;
	height: 8px;
	border-radius: 8px;
}

/* Paint tool grids (terrain + brush) */
.region-editor-panel-new .re-terrain-grid {
	display: grid;
	grid-template-columns: repeat(5, 60px);
	gap: 8px;
	justify-content: center;
}

.region-editor-panel-new .re-terrain-item {
	width: 60px;
	height: 60px;
	background:#FFFFFF;
	border:1px solid #E5E7EB;
	border-radius:6px;
	padding:2px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:4px;
	cursor:pointer;
}
.region-editor-panel-new .re-terrain-item:hover { border-color:#9CA3AF; }
.region-editor-panel-new .re-terrain-item.active {
	background:#F0F7FF;
	border-color:#3B82F6;
	box-shadow:0 0 0 2px #3B82F6;
}
.region-editor-panel-new .re-terrain-icon {
	width:44px; height:33px; border:0.25px solid rgba(0,0,0,0.4); border-radius:4px; background:#d9d9d9; background-size:cover; background-position:center; display:block;
}
.region-editor-panel-new .re-terrain-label { font-size:10px; color:#4B5563; font-weight:600; text-transform:none; }

.region-editor-panel-new .re-brush-grid {
	display: grid;
	grid-template-columns: repeat(3, 81px);
	gap: 14px;
	justify-content: left;
}
.region-editor-panel-new .re-brush-item {
	width: 78px;
	height: 48px;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.region-editor-panel-new .re-brush-item:hover { border-color: #9CA3AF; }
.region-editor-panel-new .re-brush-item.active { background: #EEF5FF; border-color: #3B82F6; box-shadow: 0 0 0 2px #3B82F6; }

/* Circle preview matching legacy look */
.region-editor-panel-new .re-brush-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #EEEEEE;
	border: 1px solid #DFD800;
	border-radius: 50%;
	color: #333;
	font-weight: 700;
}
.region-editor-panel-new .re-brush-circle > span { font-size: 14px; line-height: 1; }

/* Ensure paint cursor persists over child SVG elements (do not override on the SVG itself) */
.svg-paint-cursor * { cursor: inherit !important; }