/* 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;
}

/* ── Reference picture (wm.map.reference.js) ─────────────────────────────── */
/* Global for the same reason: the handles are Mapbox markers built in JS. Orange, because
   nothing on a drawing is orange by default and the handles must never be mistaken for one
   of its corners. */
.wm-ref-handle {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: #fff;
	border: 2px solid #F97316;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
	cursor: nwse-resize;
}

.wm-ref-handle-move,
.wm-ref-handle-rotate {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #F97316;
	border-color: #fff;
	border-radius: 50%;
}

.wm-ref-handle-move {
	width: 30px;
	height: 30px;
	cursor: move;
}

.wm-ref-handle-rotate {
	width: 24px;
	height: 24px;
	cursor: grab;
}

/* The angle, beside the knob while it is being turned: where the eye already is. */
.wm-ref-handle-readout {
	position: absolute;
	left: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%);
	display: none;
	padding: 1px 6px;
	border-radius: 4px;
	background: rgba(15, 23, 42, 0.85);
	color: #fff;
	font: 600 11px/16px system-ui, sans-serif;
	white-space: nowrap;
	pointer-events: none;
}

.wm-ref-handle-turning .wm-ref-handle-readout {
	display: block;
}

/* A crop handle: a bar on the middle of an edge, turned with the picture so it lies along it. */
.wm-ref-handle-crop {
	width: 24px;
	height: 8px;
	border-radius: 4px;
	cursor: grab;
}

/* A point picked for pairing: the picture's in orange, the map's in blue, numbered alike. */
.wm-ref-pin {
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	border: 2px solid #fff;
	color: #fff;
	font: 600 11px/16px system-ui, sans-serif;
	text-align: center;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.4);
	pointer-events: none;
}

.wm-ref-pin-picture {
	background: #F97316;
}

.wm-ref-pin-map {
	background: #0EA5E9;
}

.wm-ref-pin-pending {
	animation: wm-ref-pulse 1s ease-in-out infinite;
}

@keyframes wm-ref-pulse {
	50% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.25); }
}

/* The sheet over the map while points are picked: the picks land here, not in the drawing. */
.wm-ref-capture {
	position: absolute;
	inset: 0;
	z-index: 3;
	cursor: crosshair;
	touch-action: none;
}