/*
 * One compact UI scale drives the floating overlays and the modals.
 * Tweak the :root variables below to change overall density; everything
 * carrying .ui-compact follows, including Bootstrap's own component vars.
 */
:root {
	/* Global size multiplier: 1 = original scale, .5 = half size. */
	--ui-scale: 1.0;

	--ui-font-size: calc(.8125rem * var(--ui-scale));
	--ui-label-size: calc(.6875rem * var(--ui-scale));
	--ui-heading-size: calc(.9375rem * var(--ui-scale));
	--ui-control-height: calc(2rem * var(--ui-scale));
	--ui-pad-y: calc(.25rem * var(--ui-scale));
	--ui-pad-x: calc(.5rem * var(--ui-scale));
	--ui-gap: calc(.375rem * var(--ui-scale));
	--ui-radius: calc(.375rem * var(--ui-scale));
	--ui-select-min-width: calc(7.5rem * var(--ui-scale));

	--ui-overlay-inset: calc(.75rem * var(--ui-scale));
	/* Right-edge room reserved for the floating account menu. */
	--ui-user-menu-space: calc(10rem * var(--ui-scale));
}

html, body {
	height: 100%;
	/* Tracks mobile browser chrome showing and hiding. */
	height: 100dvh;
	margin: 0;
	overflow: hidden;
}

/* The map fills the viewport; every control floats above it. */
#mapContainer {
	position: absolute;
	inset: 0;
	background: #fff;
	/* Hand pinch/drag gestures to panzoom instead of the browser's page zoom. */
	touch-action: none;
}

/* ---- Shared compact scale ------------------------------------------------ */

.ui-compact {
	font-size: var(--ui-font-size);
	line-height: 1.25;

	--bs-btn-padding-y: var(--ui-pad-y);
	--bs-btn-padding-x: var(--ui-pad-x);
	--bs-btn-font-size: var(--ui-font-size);
	--bs-btn-border-radius: var(--ui-radius);

	--bs-nav-link-padding-y: var(--ui-pad-y);
	--bs-nav-link-padding-x: var(--ui-pad-x);
	--bs-nav-link-font-size: var(--ui-font-size);

	--bs-list-group-item-padding-y: var(--ui-pad-y);
	--bs-list-group-item-padding-x: var(--ui-pad-x);

	--bs-modal-padding: var(--ui-pad-x);
	--bs-modal-header-padding: var(--ui-pad-y) var(--ui-pad-x);
	--bs-modal-border-radius: var(--ui-radius);
	--bs-modal-footer-gap: var(--ui-gap);
	--bs-gutter-x: var(--ui-gap);
}

/* Bootstrap redeclares these vars on the components themselves, which beats
   the values inherited from .ui-compact, so re-apply the scale per component. */
.ui-compact .btn {
	--bs-btn-padding-y: var(--ui-pad-y);
	--bs-btn-padding-x: var(--ui-pad-x);
	--bs-btn-font-size: var(--ui-font-size);
	--bs-btn-border-radius: var(--ui-radius);
}

.ui-compact .list-group {
	--bs-list-group-item-padding-y: var(--ui-pad-y);
	--bs-list-group-item-padding-x: var(--ui-pad-x);
}

.ui-compact .nav {
	--bs-nav-link-padding-y: var(--ui-pad-y);
	--bs-nav-link-padding-x: var(--ui-pad-x);
	--bs-nav-link-font-size: var(--ui-font-size);
}

/* Bootstrap's default block margins are what make these panels feel airy. */
.ui-compact p,
.ui-compact ul,
.ui-compact ol,
.ui-compact details,
.ui-compact .list-group {
	margin-bottom: var(--ui-gap);
}

.ui-compact hr {
	margin: var(--ui-pad-y) 0;
}

.ui-compact .nav-tabs {
	margin-bottom: var(--ui-gap);
}

.ui-compact .btn-group > .btn + .btn {
	margin-left: var(--ui-pad-y);
}

/* Draw the delete mark instead of relying on a platform-dependent text glyph. */
.ui-compact .delete-btn {
	font-size: 0;
	width: calc(2rem * var(--ui-scale));
	min-width: calc(2rem * var(--ui-scale));
}

.ui-compact .delete-btn::before,
.ui-compact .delete-btn::after {
	content: '';
	display: block;
	width: 1rem;
	height: 2px;
	margin: 0 auto;
	background: currentColor;
	border-radius: 1px;
}

.ui-compact .delete-btn::before {
	transform: rotate(45deg);
}

.ui-compact .delete-btn::after {
	transform: rotate(-45deg) translateY(-2px);
}

.ui-compact .modal-footer > *:last-child {
	margin-bottom: 0;
}

.ui-compact .row {
	--bs-gutter-x: var(--ui-gap);
	--bs-gutter-y: var(--ui-gap);
}

.ui-compact .form-control,
.ui-compact .form-select {
	font-size: var(--ui-font-size);
	padding: var(--ui-pad-y) var(--ui-pad-x);
	min-height: var(--ui-control-height);
	border-radius: var(--ui-radius);
}

.ui-compact textarea.form-control {
	min-height: 0;
}

.ui-compact .form-label {
	font-size: var(--ui-label-size);
	margin-bottom: .1rem;
}

.ui-compact .modal-title,
.ui-compact h5 {
	font-size: var(--ui-heading-size);
}

/* Bootstrap sizes floating labels for 3.5rem tall controls; rescale to ours. */
.ui-compact .form-floating > .form-select {
	height: var(--ui-control-height);
	min-height: var(--ui-control-height);
	padding-top: calc(var(--ui-label-size) + var(--ui-pad-y));
	padding-bottom: 0;
	line-height: 1.2;
}

.ui-compact .form-floating > label {
	padding: .1rem var(--ui-pad-x);
	font-size: var(--ui-font-size);
	height: auto;
	border: 0;
}

.ui-compact .form-floating > .form-select ~ label {
	transform: scale(.8) translateY(calc(var(--ui-pad-y) * -1)) translateX(.1rem);
}

/* ---- Map pan/zoom performance --------------------------------------------- */

/* Hiding labels/shading/dividers while actively panning or zooming cuts the
   number of nodes the browser has to repaint each frame. map-label (the larger
   block/lot number) stays visible for now; only the smaller per-grave labels
   and shading/dividers are hidden. */
body.is-map-interacting .map-label-sm,
body.is-map-interacting .map-grave-shade,
body.is-map-interacting .map-grave-divider {
	display: none;
}

/* ---- Floating toolbar ---------------------------------------------------- */

.map-overlay {
	position: absolute;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(2px);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--ui-radius);
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
	padding: var(--ui-pad-y) var(--ui-pad-x);
}

#mapToolbar {
	/* --ui-viewport-top follows browser chrome that overlays the layout viewport. */
	top: calc(var(--ui-overlay-inset) + var(--ui-viewport-top, 0px) + env(safe-area-inset-top, 0px));
	left: calc(var(--ui-overlay-inset) + env(safe-area-inset-left, 0px));
	/* Leave the right edge free for #userMenu. */
	max-width: calc(100vw - var(--ui-overlay-inset) * 2 - var(--ui-user-menu-space));
	flex-wrap: wrap;
	touch-action: manipulation;
}

/* ---- Floating account menu ----------------------------------------------- */

#userMenu {
	/* Same line as #mapToolbar, anchored to the opposite edge. */
	top: calc(var(--ui-overlay-inset) + var(--ui-viewport-top, 0px) + env(safe-area-inset-top, 0px));
	right: calc(var(--ui-overlay-inset) + env(safe-area-inset-right, 0px));
	touch-action: manipulation;
}

#userMenuButton {
	max-width: calc(var(--ui-user-menu-space) - 1rem);
}

.user-menu-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--bs-secondary, #6c757d);
	color: #fff;
	font-size: .85em;
	font-weight: 600;
	line-height: 1;
}

/* Keep the floating labels readable before the lists are populated. */
#filterModal .form-select {
	min-width: var(--ui-select-min-width);
}

/* Phones: tighten the scale; the toolbar wraps instead of overflowing. */
@media (max-width: 767.98px) {
	:root {
		--ui-scale: 1.0;
		--ui-select-min-width: calc(9.5rem * var(--ui-scale));
		--ui-user-menu-space: calc(4rem * var(--ui-scale));
	}

	/* Only the avatar fits next to a wrapped toolbar. */
	.user-menu-name {
		display: none;
	}
}