/*
 * Clip Studio Paint-inspired theme for the level editor: muted graphite
 * greys rather than a near-black overlay, flat 2px-radius controls, thin
 * structural hairlines instead of thick borders. Three fixed regions —
 * the topbar (Settings dropdown, tile size, Undo/Redo), the left tool bar,
 * and the right-docked panel (Palette + Layers, both always visible, no
 * tab switching) — plus the Load Tileset / Save As modals opened from the
 * Settings dropdown. Colors are centralized as custom properties on :root
 * so all of these (siblings, not descendants of one shared container)
 * draw from one palette.
 */
:root {
	--le-bg-panel: #3d3d3d;
	--le-bg-bar: #2b2b2b;
	--le-bg-input: #262626;
	--le-bg-btn: #4a4a4a;
	--le-bg-btn-hover: #565656;
	--le-border: #1c1c1c;
	--le-border-input: #5a5a5a;
	--le-text: #d8d8d8;
	--le-text-dim: #969696;
	--le-accent: #4a7dff;
	--le-topbar-height: 40px;
}

/* --- topbar --- */

.level-editor-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--le-topbar-height);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.5rem;
	background: var(--le-bg-bar);
	border-bottom: 1px solid var(--le-border);
	box-sizing: border-box;
	z-index: 1100;
	font-family: system-ui, sans-serif;
	color: var(--le-text);
}

.le-topbar-btn {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	height: 28px;
	padding: 0 0.5rem;
	margin: 0;
	background: transparent;
	color: var(--le-text);
	border: 1px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	font-size: 0.8rem;
}

.le-topbar-btn:hover {
	background: var(--le-bg-btn-hover);
	border-color: var(--le-border-input);
}

.le-topbar-btn svg {
	width: 15px;
	height: 15px;
}

.le-topbar-btn svg:last-child {
	width: 12px;
	height: 12px;
	opacity: 0.7;
}

.le-topbar-field {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.75rem;
	color: var(--le-text-dim);
}

.le-topbar-coords {
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	font-size: 0.75rem;
	color: var(--le-text-dim);
	min-width: 5.5rem;
}

.le-tile-size-input {
	width: 3.2rem;
	box-sizing: border-box;
	padding: 0.2rem 0.35rem;
	background: var(--le-bg-input);
	color: var(--le-text);
	border: 1px solid var(--le-border-input);
	border-radius: 2px;
	font-size: 0.8rem;
}

.le-tile-size-input:focus {
	outline: none;
	border-color: var(--le-accent);
}

.le-topbar-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	background: transparent;
	color: var(--le-text);
	border: 1px solid transparent;
	border-radius: 3px;
	cursor: pointer;
}

.le-topbar-icon-btn:hover {
	background: var(--le-bg-btn-hover);
	border-color: var(--le-border-input);
}

.le-topbar-icon-btn svg {
	width: 16px;
	height: 16px;
}

/* --- Settings dropdown --- */

.le-dropdown {
	position: relative;
}

.le-dropdown-menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 140px;
	background: var(--le-bg-panel);
	border: 1px solid var(--le-border-input);
	border-radius: 3px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	z-index: 1200;
	overflow: hidden;
}

.le-dropdown-item {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.45rem 0.7rem;
	margin: 0;
	background: transparent;
	color: var(--le-text);
	border: none;
	border-radius: 0;
	text-align: left;
	cursor: pointer;
	font-size: 0.8rem;
}

.le-dropdown-item:hover {
	background: var(--le-accent);
	color: #fff;
}

/* --- modals (Load Tileset / Save As) --- */

.le-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1300;
}

.le-modal-overlay[hidden] {
	display: none;
}

.le-modal {
	width: 320px;
	max-width: calc(100vw - 2rem);
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	background: var(--le-bg-panel);
	border: 1px solid var(--le-border-input);
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	font-family: system-ui, sans-serif;
	color: var(--le-text);
	font-size: 0.85rem;
}

.le-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--le-border);
	background: var(--le-bg-bar);
}

.le-modal-header h3 {
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--le-text);
}

.le-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 3px;
	color: var(--le-text-dim);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}

.le-modal-close:hover {
	background: var(--le-bg-btn-hover);
	color: var(--le-text);
}

.le-modal-body {
	padding: 0.75rem;
}

/* --- shared panel look (right-docked panel + modal bodies) --- */

.level-editor-panel {
	position: fixed;
	top: var(--le-topbar-height);
	right: 0;
	width: 260px;
	height: calc(100% - var(--le-topbar-height));
	overflow-y: auto;
	background: var(--le-bg-panel);
	color: var(--le-text);
	font-family: system-ui, sans-serif;
	font-size: 0.85rem;
	box-sizing: border-box;
	z-index: 1000;
	border-left: 1px solid var(--le-border);
}

.le-section {
	margin: 0;
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid var(--le-border);
}

.level-editor-panel h3,
.le-modal-body h3 {
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--le-text-dim);
}

.level-editor-panel input[type="text"],
.level-editor-panel input[type="number"],
.le-modal-body input[type="text"],
.le-modal-body input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	margin: 0.2rem 0 0.5rem;
	padding: 0.3rem 0.4rem;
	background: var(--le-bg-input);
	color: var(--le-text);
	border: 1px solid var(--le-border-input);
	border-radius: 2px;
}

.level-editor-panel input[type="text"]:focus,
.level-editor-panel input[type="number"]:focus,
.le-modal-body input[type="text"]:focus,
.le-modal-body input[type="number"]:focus {
	outline: none;
	border-color: var(--le-accent);
}

.level-editor-panel button,
.le-modal-body button {
	padding: 0.3rem 0.6rem;
	margin: 0 0.3rem 0.3rem 0;
	background: var(--le-bg-btn);
	color: var(--le-text);
	border: 1px solid var(--le-border-input);
	border-radius: 2px;
	cursor: pointer;
	font-size: 0.8rem;
}

.level-editor-panel button:hover,
.le-modal-body button:hover {
	background: var(--le-bg-btn-hover);
}

.level-editor-panel button.active {
	background: var(--le-accent);
	border-color: var(--le-accent);
	color: #fff;
}

.level-editor-panel button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.le-status {
	color: var(--le-text-dim);
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
}

.le-status.error {
	color: #ff6b6b;
}

/* --- entity / tileset grids and lists --- */

.le-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	max-height: 260px;
	overflow-y: auto;
}

.le-entity-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 56px;
	padding: 0.25rem;
	margin: 0;
	font-size: 0.65rem;
	text-align: center;
	word-break: break-word;
}

.le-swatch {
	background:
		linear-gradient(45deg, #333 25%, transparent 25%),
		linear-gradient(-45deg, #333 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #333 75%),
		linear-gradient(-45deg, transparent 75%, #333 75%);
	background-size: 10px 10px;
	background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

.le-teleport-form {
	margin-top: 0.5rem;
}

.le-teleport-form label,
.le-field {
	display: block;
	margin-bottom: 0.3rem;
}

.le-load-label {
	display: inline-block;
	cursor: pointer;
}

.le-tileset-list {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
	max-height: 200px;
	overflow-y: auto;
	background: var(--le-bg-input);
	border: 1px solid var(--le-border-input);
	border-radius: 2px;
}

.le-tileset-list li {
	padding: 0.35rem 0.5rem;
	cursor: pointer;
	border-bottom: 1px solid var(--le-border);
}

.le-tileset-list li:last-child {
	border-bottom: none;
}

.le-tileset-list li:hover {
	background: var(--le-bg-btn-hover);
}

.le-tileset-list li.active {
	background: var(--le-accent);
	color: #fff;
}

/* --- Palette: Tiles/Entities mode tabs + fixed-height content --- */
/* Bootstrap .nav-tabs technique: the row itself carries one continuous
   border-bottom; each tab has a fully transparent border by default and
   sits exactly on that line via `margin-bottom: -1px`, so an inactive tab
   is just colored text with no visible box at all. Hovering reveals a
   neutral border on three sides while the bottom stays the row's own
   border color (still reads as "open," not boxed off). The active tab's
   border-bottom is recolored to match `.le-palette-content` directly
   beneath it instead — that shared edge "disappears," fusing the tab to
   the panel below it, the one place Bootstrap actually shows a border on
   all four sides at once. */

.le-mode-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 0.6rem 0.75rem 0;
	background: var(--le-bg-bar);
	border-bottom: 1px solid var(--le-border-input);
}

.le-mode-tabs .le-mode-tab {
	flex: none;
	margin: 0 0 -1px;
	padding: 0.4rem 0.9rem;
	background: transparent;
	color: var(--le-text-dim);
	border: 1px solid transparent;
	border-radius: 6px 6px 0 0;
	font-size: 0.78rem;
}

.le-mode-tabs button.le-mode-tab:hover {
	color: var(--le-text);
	background: transparent;
	border-color: var(--le-bg-btn-hover) var(--le-bg-btn-hover) var(--le-border-input);
}

.le-mode-tabs button.le-mode-tab.active {
	background: var(--le-bg-panel);
	color: var(--le-text);
	border-color: var(--le-border-input) var(--le-border-input) var(--le-bg-panel);
}

.le-palette-content {
	background: var(--le-bg-panel);
	border-top: 1px solid var(--le-border-input);
	margin-top: -1px;
	height: 380px;
	overflow-y: auto;
	box-sizing: border-box;
}

.le-palette-content .le-section:last-child {
	border-bottom: none;
}

.le-layer-list {
	list-style: none;
	margin: 0.5rem 0;
	padding: 0;
	background: var(--le-bg-input);
	border: 1px solid var(--le-border-input);
	border-radius: 2px;
	height: 160px;
	overflow-y: auto;
}

.le-layer-list li {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.35rem;
	cursor: pointer;
	border-bottom: 1px solid var(--le-border);
	font-size: 0.78rem;
}

.le-layer-list li:last-child {
	border-bottom: none;
}

.le-layer-list li:hover {
	background: var(--le-bg-btn-hover);
}

.le-layer-list li.active {
	background: var(--le-accent);
	color: #fff;
}

.le-layer-list li.locked {
	color: var(--le-text-dim);
	cursor: pointer;
	font-style: italic;
}

.le-layer-name {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.le-layer-handle {
	cursor: grab;
	color: var(--le-text-dim);
	letter-spacing: -2px;
	user-select: none;
	padding: 0 0.1rem;
}

.le-layer-handle:hover {
	color: var(--le-text);
}

.le-layer-close {
	cursor: pointer;
	color: #c66;
	padding: 0 0.25rem;
	line-height: 1;
	user-select: none;
}

.le-layer-close:hover {
	color: #ff6b6b;
}

/* --- left-side tool bar --- */

.level-editor-toolbar {
	position: fixed;
	top: var(--le-topbar-height);
	left: 0;
	height: calc(100% - var(--le-topbar-height));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem;
	background: var(--le-bg-bar);
	box-sizing: border-box;
	z-index: 1000;
	border-right: 1px solid var(--le-border);
}

.le-tool-btn {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: var(--le-bg-btn);
	color: var(--le-text);
	border: 1px solid var(--le-border-input);
	border-radius: 3px;
	cursor: pointer;
}

.le-tool-btn:hover {
	background: var(--le-bg-btn-hover);
}

.le-tool-btn svg {
	width: 18px;
	height: 18px;
}

.le-tool-btn.active {
	background: var(--le-accent);
	border-color: var(--le-accent);
	color: #fff;
}

.le-tilesheet-wrap {
	position: relative;
	display: block;
	width: 100%;
	cursor: crosshair;
	user-select: none;
}

.le-tilesheet-img {
	display: block;
	width: 100%;
	height: auto;
	image-rendering: pixelated;
	border: 1px solid var(--le-border-input);
	border-radius: 2px;
}

.le-tilesheet-selection {
	position: absolute;
	box-sizing: border-box;
	border: 2px solid var(--le-accent);
	background: rgba(74, 125, 255, 0.25);
	pointer-events: none;
}