/* Chrome the drawing editor builds in JavaScript, over the map canvas.

   It cannot live in a scoped .razor.css: these elements are created by wm.map.drawing.js and
   appended to the map container, so they carry no Blazor scope attribute and a scoped rule
   would never match them. Everything here is prefixed wm-drw- for the same reason the GL
   layers are — the map container is shared with Mapbox's own controls. */

/* ── The action bar over a selected shape ────────────────────────────────── */

.wm-drw-actionbar {
	position: absolute;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: 9px;
	background: #ffffff;
	border: 1px solid #1E293B1F;
	box-shadow: 0 4px 12px rgba(30, 41, 59, 0.18);
	/* Positioned by script; the transform picks the anchor corner. */
	transform: translate(-50%, -100%);
	pointer-events: auto;
}

.wm-drw-actionbar-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: #475569;
	cursor: pointer;
	transition: background .12s, color .12s;
}

	.wm-drw-actionbar-btn:hover {
		background: #F1F5F9;
		color: #0F172A;
	}

	/* Fix is offered because something is wrong, so it looks it before it is hovered. */
	.wm-drw-actionbar-btn.wm-drw-actionbar-warn {
		color: #DC2626;
	}

	.wm-drw-actionbar-btn.wm-drw-actionbar-warn:hover {
		background: #FEE2E2;
		color: #B91C1C;
	}

	.wm-drw-actionbar-btn.wm-drw-actionbar-danger:hover {
		background: #FEE2E2;
		color: #B91C1C;
	}

	.wm-drw-actionbar-btn:focus-visible {
		outline: 2px solid #3B82F6;
		outline-offset: 1px;
	}

/* ── A table whose cells look selected ───────────────────────────────────── */
/* Global rather than scoped: the class is applied by custom.js, which knows nothing about
   Blazor's scope attributes. */

/* The cell fills, so the selection reads as "these cells" rather than "these words". */
.wm-selectable-table .wm-cell-selected {
	background: #DBEAFE;
}

/* And the glyph highlight is dropped to nothing, so the two do not stack into a darker
   patch over the text than around it. The text stays black on the cell's own fill. */
.wm-selectable-table ::selection {
	background: transparent;
	color: inherit;
}

/* The Box tool's rubber band while a box is dragged over the map. */
.wm-drw-boxselect {
	position: absolute;
	pointer-events: none;
	border: 1.5px dashed #DC2626;
	background: rgba(220, 38, 38, 0.08);
	border-radius: 2px;
	z-index: 2;
}