/* RESET STYLES */
/*
 * Specificity: Bootstrap loads unlayered from CDN; app stylesheets after it win on
 * equal specificity. Future @layer migration requires importing Bootstrap into
 * @layer bootstrap first, then wrapping app CSS in @layer mantic.
 */
/* makes sizing simpler */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* remove default spacing; font size inherits from ancestors (body: 14px default) */
*,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	font: inherit;
}

/* BASE HTML ELEMENT STYLES */
html {
	font-size: 100%; /* = 16px by default, but honours the user's browser font size */
	color-scheme: dark;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* ACCESSIBILITY - REDUCED MOTION */
	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: initial;
	}
}

/* Components without local handling inherit instant motion */
@media (prefers-reduced-motion: reduce) {
	:where(*, *::before, *::after) {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	overflow-x: hidden;
	font-size: var(--fs-450);
	line-height: 1.5;
	text-rendering: optimizeSpeed;
	font-family: "Atkinson Hyperlegible", "Inter", system-ui, sans-serif;
	background-color: var(--clr-background);
	color: var(--clr-text-high);
}

/* Bootstrap / UA use em-based sizes below body — floor to minimum app text */
small,
.small,
.form-text,
.badge {
	font-size: var(--fs-450);
}

/* MEDIA ELEMENTS */
img,
picture,
video {
	display: block;
	max-width: 100%;
	outline: 1px solid rgba(255, 255, 255, 0.1);
	outline-offset: -1px;
}

/* Map surfaces — skip decorative outlines on tiles and canvas */
.maplibregl-map img,
.maplibregl-canvas,
.map-container img,
.grid-map img,
#intervention-map img {
	outline: none;
}

svg {
	display: block;
	max-width: 100%;
}

/* ICONS */
svg[data-lucide] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* CSS VARIABLES - Mobile-first defaults */
:root {
	/* Shell layout */
	--app-header-height: 3.125rem;

	/* Semantic HSL tokens (dark default) — bridged into legacy --clr-* below */
	--sidebar-background: 220 4% 15%;
	--foreground: 0 0% 100%;
	--border: 240 43% 97% / 0.125;
	--background: 220 5% 11%;
	--sidebar-foreground: 0 0% 100%;
	--sidebar-accent: 220 6% 16%;
	--sidebar-accent-foreground: 0 0% 100%;
	--sidebar-border: 220 8% 18%;

	/* Legacy palette — derived from semantic tokens where it improves cohesion */
	--clr-background: hsl(var(--background));
	--clr-surface-1: hsl(var(--sidebar-background));
	/* Elevation 1dp: 5% white overlay */
	--clr-surface-2: #212121;
	/* Elevation 2dp: 7% white overlay */
	--clr-surface-3: #242424;
	/* Elevation 3dp: 8% white overlay */
	--clr-surface-4: #272727;
	/* Elevation 4dp: 9% white overlay */

	/* Text colors with proper emphasis levels */
	--clr-text-high: hsl(var(--foreground) / 0.87);
	--clr-text-medium: hsl(var(--foreground) / 0.6);
	--clr-text-disabled: hsl(var(--foreground) / 0.38);

	/* Accent (links, selected chrome). Filled CTAs use --clr-cta, not this. */
	--clr-primary: #6b7280;
	--clr-primary-rgb: 107, 114, 128;
	--clr-secondary: #6b7280;
	--clr-primary-hover: color-mix(in srgb, var(--clr-primary) 85%, black);
	--clr-on-primary: #ffffff;
	--clr-error: #b82c2c;

	/* Filled CTA — white pill on dark, near-black on light */
	--clr-cta: #ffffff;
	--clr-on-cta: #000000;
	--clr-cta-hover: #e8e8e8;
	--clr-cta-active: #dcdcdc;
	/* Glyphs on checked controls (ink = --clr-on-cta) */
	--form-check-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
	--form-radio-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
	--form-switch-thumb: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000'/%3e%3c/svg%3e");
	--clr-outline-primary-fg: var(--clr-text-high);
	--app-btn-outline-border: rgba(255, 255, 255, 0.18);
	--btn-close-filter: invert(1);

	--clr-scrollbar-thumb: rgba(255, 255, 255, 0.12);

	--clr-dialog: hsl(0 0% 9%);
	--clr-overlay: hsl(0 0% 0% / 0.8);
	--clr-dialog-shadow:
		0 10px 15px -3px hsl(0 0% 0% / 0.25),
		0 4px 6px -4px hsl(0 0% 0% / 0.15);
	--clr-dialog-input: hsl(0 0% 100% / 0.04);
	--clr-dialog-input-focus: hsl(0 0% 100% / 0.06);
	--clr-dialog-focus-border: hsl(0 0% 100% / 0.22);
	--clr-dialog-focus-glow: hsl(0 0% 100% / 0.08);
	--clr-dialog-ring: hsl(0 0% 100% / 0.2);
	--clr-spinner-track: hsl(0 0% 100% / 0.12);
	--clr-dialog-inset: hsl(0 0% 100% / 0.03);
	--clr-dialog-item: hsl(0 0% 100% / 0.06);
	--clr-destructive: hsl(0 38% 40%);
	--clr-destructive-hover: hsl(0 38% 46%);
	--clr-on-destructive: hsl(0 0% 98%);
	--clr-destructive-muted: hsl(0 35% 36% / 0.22);
	--clr-destructive-icon: hsl(0 32% 58%);

	--shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.3);
	--shadow-chrome:
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 0.25rem 1rem rgba(0, 0, 0, 0.35);
	--shadow-header: none;

	/* Focus rings only — do not use for hover / tooltip / selected chrome */
	--clr-focus: #6b7280;
	--clr-focus-ring: color-mix(in srgb, var(--clr-focus) 25%, transparent);

	/* Semantic feedback (badges, destructive actions) */
	--clr-success-text: #86efac;
	--clr-success-bg: rgba(34, 197, 94, 0.14);
	--clr-success-border: rgba(134, 239, 172, 0.24);
	--clr-info-text: #bfdbfe;
	--clr-info-bg: rgba(96, 165, 250, 0.14);
	--clr-info-border: rgba(147, 197, 253, 0.24);
	--clr-danger-text: #f87171;
	--clr-danger-text-hover: #fca5a5;
	--clr-danger-bg: rgba(248, 113, 113, 0.08);
	--clr-danger-bg-hover: rgba(248, 113, 113, 0.12);
	--clr-danger-border: rgba(248, 113, 113, 0.45);
	--clr-danger-border-muted: rgba(248, 113, 113, 0.4);
	--clr-danger-bg-muted: rgba(239, 68, 68, 0.2);
	--clr-danger-bg-strong: rgba(239, 68, 68, 0.16);
	--clr-warning-text: #fbbf24;
	--clr-warning-bg-muted: rgba(251, 191, 36, 0.2);
	--clr-info-accent-text: #60a5fa;
	--clr-info-bg-muted: rgba(59, 130, 246, 0.2);

	/* Ghost / outline button hover (theme-aware; light uses a gray chip) */
	--clr-btn-hover-bg: rgba(255, 255, 255, 0.06);
	--clr-btn-hover-border: rgba(255, 255, 255, 0.28);
	--clr-btn-active-bg: rgba(255, 255, 255, 0.09);

	/* Border color */
	--clr-border: hsl(var(--border));

	/* Map overlay chrome (legends, toolbars, info cards on map surfaces) */
	--map-overlay-glass-rgb: 29, 29, 29;
	--map-overlay-glass-alpha: 0.72;
	--map-overlay-glass-blur: 8px;
	--map-overlay-bg: rgba(var(--map-overlay-glass-rgb), var(--map-overlay-glass-alpha));
	--map-overlay-backdrop: blur(var(--map-overlay-glass-blur));
	--map-overlay-bg-elevated: var(--map-overlay-bg);
	--map-overlay-inset-bg: color-mix(in srgb, var(--clr-text-high) 8%, var(--map-overlay-bg));
	--map-overlay-border: transparent;
	--map-overlay-border-strong: transparent;
	--map-overlay-shadow: none;
	--map-overlay-radius: 7px;
	--map-overlay-surface-background: var(--map-overlay-bg);
	--map-overlay-surface-border: 1px solid var(--map-overlay-border-strong);
	--map-overlay-surface-radius: var(--map-overlay-radius);
	--map-overlay-surface-shadow: var(--map-overlay-shadow);
	--map-overlay-surface-filter: var(--map-overlay-backdrop);
	--map-overlay-inset: 8px;
	/* Toolbar / zoom / mode-select chrome — slightly compact vs 40×40 */
	--map-overlay-ctrl-size: 34px;
	--map-overlay-ctrl-pad: 6px;
	--map-overlay-ctrl-icon: 16px;
	--map-overlay-hover-bg: rgba(255, 255, 255, 0.06);
	--map-overlay-active-bg: rgba(255, 255, 255, 0.09);
	--map-overlay-accent: var(--clr-secondary);
	--map-overlay-focus-ring: var(--clr-focus);
	--map-overlay-pressed-border: rgba(255, 255, 255, 0.18);
	--map-overlay-thumb: var(--clr-light);
	--map-overlay-play-bg: var(--map-overlay-inset-bg);
	--map-overlay-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--map-overlay-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.3' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--map-overlay-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

	/* Layered elevation for cards/containers (shadow-as-border pattern) */
	--shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.08);
	--shadow-border-hover: 0 0 0 1px rgba(255, 255, 255, 0.13);

	/* Dark theme specific colours */
	--clr-dark: var(--clr-background);
	--clr-light: #ffffff;

	/* Font sizes - Mobile defaults (html 16px for rem steps; nothing below --fs-450) */
	--fs-450: 0.875rem;
	/* smallest app text */
	--fs-400: var(--fs-450);
	/* legacy caption step — clamped to minimum */
	--fs-500: 1rem;
	--fs-600: 1.125rem;
	--fs-700: 1.5rem;
	/* Page hero in compare / visualise shells: h1.compare-title (e.g. Compare regions) */
	--fs-compare-hero-title: 1.5rem;
	--fs-800: 1.75rem;
	--fs-900: 2rem;

	/* Font weights */
	--fw-300: 300;
	--fw-400: 400;
	--fw-500: 500;
	--fw-600: 600;
	--fw-700: 700;

	/* Padding - Mobile defaults (smaller) */
	--pd-200: 0.5em;
	--pd-300: 0.75em;
	--pd-400: 1em;
	--pd-450: 1.5em;
	--pd-500: 2em;
	--pd-600: 3em;
	--pd-650: 3.5em;
	--pd-700: 1em;
	--pd-800: 1.5em;
	--pd-900: 6em;

	/* Margins - Mobile defaults (smaller) */
	--mg-200: 0.5em;
	--mg-300: 0.75em;
	--mg-400: 1em;
	--mg-450: 1.5em;
	--mg-500: 2em;
	--mg-600: 3em;
	--mg-700: 1em;
	--mg-800: 1.5em;
	--mg-900: 6em;

	/* Progressive enhancement for larger screens */
	@media (min-width: 576px) {
		--pd-700: 1.5em;
		--pd-800: 2em;
		--mg-700: 1.5em;
		--mg-800: 2em;
	}

	@media (min-width: 768px) {
		--pd-700: 2em;
		--pd-800: 2.5em;
		--mg-700: 2em;
		--mg-800: 2.5em;
	}
}

/* Browsers without backdrop-filter keep a more opaque fill (no frosted-glass regression). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root {
		--map-overlay-glass-alpha: 0.92;
	}
}

/* Light theme class - will be applied via JavaScript */
:root[data-theme="light"] {
	--background: 0 0% 98%;
	--foreground: 240 3% 6%;
	--border: 220 13% 91%;
	--sidebar-background: 0 0% 98%;
	--sidebar-foreground: 240 5% 26%;
	--sidebar-accent: 240 5% 96%;
	--sidebar-accent-foreground: 240 6% 10%;
	--sidebar-border: 220 13% 91%;

	--clr-background: hsl(var(--background));
	--clr-surface-1: #ffffff;
	/* Elevation 1dp: 5% black overlay */
	--clr-surface-2: #f5f5f5;
	/* Elevation 2dp: 7% black overlay */
	--clr-surface-3: #eeeeee;
	/* Elevation 3dp: 8% black overlay */
	--clr-surface-4: #e0e0e0;
	/* Elevation 4dp: 9% black overlay */

	--clr-text-high: hsl(var(--foreground) / 0.87);
	--clr-text-medium: hsl(var(--foreground) / 0.6);
	--clr-text-disabled: hsl(var(--foreground) / 0.38);

	/* Primary matches body text (near-black), inverted chrome */
	--clr-primary: hsl(var(--foreground));
	--clr-primary-rgb: 15, 15, 16;
	--clr-secondary: #6b7280;
	--clr-primary-hover: color-mix(in srgb, var(--clr-primary) 82%, white);
	--clr-on-primary: #ffffff;
	--clr-error: #d32f2f;

	--clr-cta: var(--clr-primary);
	--clr-on-cta: var(--clr-on-primary);
	--clr-cta-hover: var(--clr-primary-hover);
	--clr-cta-active: color-mix(in srgb, var(--clr-primary) 78%, white);
	--form-check-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
	--form-radio-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
	--form-switch-thumb: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
	--clr-outline-primary-fg: var(--clr-primary);
	--app-btn-outline-border: rgba(0, 0, 0, 0.14);
	--btn-close-filter: none;
	--clr-scrollbar-thumb: rgba(0, 0, 0, 0.18);

	color-scheme: light;

	/* Focus rings only — do not use for hover / tooltip / selected chrome */
	--clr-focus: #6b7280;
	--clr-focus-ring: color-mix(in srgb, var(--clr-focus) 25%, transparent);

	/* Semantic feedback — light surfaces need higher-contrast hues */
	--clr-success-text: #15803d;
	--clr-success-bg: rgba(34, 197, 94, 0.12);
	--clr-success-border: rgba(34, 197, 94, 0.25);
	--clr-info-text: #1d4ed8;
	--clr-info-bg: rgba(59, 130, 246, 0.12);
	--clr-info-border: rgba(59, 130, 246, 0.25);
	--clr-danger-text: #dc2626;
	--clr-danger-text-hover: #b91c1c;
	--clr-danger-bg: rgba(220, 38, 38, 0.08);
	--clr-danger-bg-hover: rgba(220, 38, 38, 0.12);
	--clr-danger-border: rgba(220, 38, 38, 0.35);
	--clr-danger-border-muted: rgba(220, 38, 38, 0.3);
	--clr-danger-bg-muted: rgba(220, 38, 38, 0.14);
	--clr-danger-bg-strong: rgba(220, 38, 38, 0.12);
	--clr-warning-text: #d97706;
	--clr-warning-bg-muted: rgba(217, 119, 6, 0.14);
	--clr-info-accent-text: #2563eb;
	--clr-info-bg-muted: rgba(37, 99, 235, 0.14);

	--clr-dialog: var(--clr-surface-1);
	--clr-overlay: hsl(0 0% 0% / 0.4);
	--clr-dialog-shadow:
		0 10px 15px -3px hsl(0 0% 0% / 0.12),
		0 4px 6px -4px hsl(0 0% 0% / 0.08);
	--clr-dialog-input: var(--clr-background);
	--clr-dialog-input-focus: var(--clr-surface-1);
	--clr-dialog-focus-border: rgba(0, 0, 0, 0.28);
	--clr-dialog-focus-glow: rgba(0, 0, 0, 0.08);
	--clr-dialog-ring: hsl(240 3% 6% / 0.2);
	--clr-spinner-track: rgba(0, 0, 0, 0.12);
	--clr-dialog-inset: rgba(0, 0, 0, 0.03);
	--clr-dialog-item: rgba(0, 0, 0, 0.04);
	--clr-destructive: var(--clr-error);
	--clr-destructive-hover: var(--clr-danger-text-hover);
	--clr-on-destructive: #ffffff;
	--clr-destructive-muted: var(--clr-danger-bg-strong);
	--clr-destructive-icon: var(--clr-danger-text);

	--shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.12);
	--shadow-chrome:
		0 0 0 1px rgba(0, 0, 0, 0.06),
		0 1px 2px -1px rgba(0, 0, 0, 0.06),
		0 0.25rem 1rem rgba(0, 0, 0, 0.12);
	--shadow-header: 0 1px 2px 0 rgba(16, 24, 40, 0.05);

	--clr-border: hsl(var(--border));

	--clr-btn-hover-bg: var(--clr-surface-3);
	--clr-btn-hover-border: color-mix(in srgb, var(--clr-text-high) 22%, transparent);
	--clr-btn-active-bg: var(--clr-surface-4);

	--map-overlay-glass-rgb: 255, 255, 255;
	--map-overlay-glass-alpha: 0.78;
	--map-overlay-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-opacity='0.6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--map-overlay-hover-bg: rgba(0, 0, 0, 0.06);
	--map-overlay-active-bg: rgba(0, 0, 0, 0.09);
	--map-overlay-pressed-border: rgba(0, 0, 0, 0.18);
	--map-overlay-thumb: var(--clr-surface-1);
	--map-overlay-play-bg: color-mix(in srgb, var(--clr-text-high) 6%, transparent);
	--map-overlay-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.7 9.5 3.3' fill='none' stroke='%23111827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--map-overlay-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6h7' fill='none' stroke='%23111827' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

	--shadow-border:
		0 0 0 1px rgba(0, 0, 0, 0.06),
		0 1px 2px -1px rgba(0, 0, 0, 0.06),
		0 2px 4px 0 rgba(0, 0, 0, 0.04);
	--shadow-border-hover:
		0 0 0 1px rgba(0, 0, 0, 0.08),
		0 1px 2px -1px rgba(0, 0, 0, 0.08),
		0 2px 4px 0 rgba(0, 0, 0, 0.06);

	/* Light theme specific colours */
	--clr-dark: #121212;
	--clr-light: #ffffff;

	img,
	picture,
	video {
		outline-color: rgba(0, 0, 0, 0.1);
	}
}

/* TYPOGRAPHY STYLES - Mobile-first */
h1 {
	font-family: "Inter", system-ui, sans-serif;
	font-size: var(--fs-800);
	font-weight: var(--fw-600);
	color: var(--clr-text-high);
	text-wrap: balance;

	@media (min-width: 576px) {
		font-size: var(--fs-900);
	}
}

h2 {
	font-family: "Inter", system-ui, sans-serif;
	font-size: var(--fs-700);
	font-weight: var(--fw-500);
	margin-bottom: var(--mg-300);
	color: var(--clr-text-high);
	text-wrap: balance;

	@media (min-width: 576px) {
		font-size: var(--fs-800);
	}
}

h3 {
	font-size: var(--fs-600);
	margin-bottom: var(--mg-200);
	color: var(--clr-text-high);
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Links - Mobile-first */
a {
	text-decoration: none;
	color: var(--clr-secondary);
	font-family: "Inter", "sans-serif";

	&:hover {
		color: var(--clr-primary);
		opacity: 0.87;
	}
}

/* LAYOUT UTILITIES */
.flex {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.container {
	width: 100%;
	padding-right: var(--pd-400);
	padding-left: var(--pd-400);
	margin-right: auto;
	margin-left: auto;
}

.d-grid {
	max-width: 100%;
	margin: 0 auto;
}

.no-flex {
	display: block !important;
}

/* COMPONENT STYLES */
/* Lockup is black ink on transparent; invert on dark chrome. */
:root:not([data-theme="light"]) .login-logo,
:root:not([data-theme="light"]) .sidebar-brand-logo {
	filter: invert(1);
}

.btn-close {
	filter: var(--btn-close-filter);
}

/* Shared dialog chrome — aliases only; theme lives on :root tokens */
:is(.app-dialog, .delete-modal) {
	--dialog-border: var(--clr-border);
	--dialog-muted-foreground: var(--clr-text-medium);
	--dialog-background: var(--clr-dialog);
	--dialog-foreground: var(--clr-text-high);
	--dialog-ring: var(--clr-dialog-ring);
	--dialog-input-bg: var(--clr-dialog-input);
	--dialog-input-bg-focus: var(--clr-dialog-input-focus);
	--dialog-hover-fill: var(--clr-btn-hover-bg);
	--dialog-hover-border: var(--clr-btn-hover-border);
	--dialog-focus-border: var(--clr-dialog-focus-border);
	--dialog-focus-glow: var(--clr-dialog-focus-glow);
	--dialog-overlay: var(--clr-overlay);
	--dialog-spinner-track: var(--clr-spinner-track);
	--dialog-shadow: var(--clr-dialog-shadow);
	--dialog-primary: var(--clr-cta);
	--dialog-primary-hover: var(--clr-cta-hover);
	--dialog-primary-active: var(--clr-cta-active);
	--dialog-primary-foreground: var(--clr-on-cta);
	--dialog-primary-muted: color-mix(in srgb, var(--clr-cta) 22%, transparent);
	--dialog-primary-icon: var(--clr-text-medium);
	--dialog-destructive: var(--clr-destructive);
	--dialog-destructive-hover: var(--clr-destructive-hover);
	--dialog-destructive-foreground: var(--clr-on-destructive);
	--dialog-destructive-muted: var(--clr-destructive-muted);
	--dialog-destructive-icon: var(--clr-destructive-icon);
	--dialog-inset-bg: var(--clr-dialog-inset);
	--dialog-item-bg: var(--clr-dialog-item);
}

/* Unclassed buttons only — classed chrome uses its own hover (app-buttons, dialogs, etc.) */
button:not([class]) {
	cursor: pointer;
	border: 1.5px solid var(--clr-border);
	border-radius: 20px;
	padding: 0.8em;
	background-color: var(--clr-surface-1);
	color: var(--clr-text-high);
	transition-property: background-color, border-color, scale;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;

	@media (min-width: 768px) {
		padding: 1.2em;
	}

	&:hover {
		background-color: var(--clr-cta);
		border-color: var(--clr-cta);
		color: var(--clr-on-cta);
	}

	&:active {
		scale: 0.96;
	}
}

/* Action button - Mobile-first */
.action-button {
	padding: var(--pd-200) var(--pd-400);
	font-size: var(--fs-500);
	border-radius: 6px;
	transition-property: transform, box-shadow, opacity, scale;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	width: 100%;
	text-align: center;
	background-color: var(--clr-cta);
	color: var(--clr-on-cta);
	border: none;

	@media (min-width: 768px) {
		width: auto;
	}

	&:hover {
		transform: translateY(-1px);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		background-color: var(--clr-cta-hover);
	}

	&:active {
		scale: 0.96;
		transform: translateY(0);
	}
}


/* UTILITY CLASSES */
.primary-color {
	color: var(--clr-primary) !important;
}

.secondary-color {
	color: var(--clr-secondary) !important;
}

.radius-30 {
	border-radius: 30px;
}

.wrap-text {
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	max-width: 15ch;
}

/* Floating card effect - reusable class */
.floating-card {
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15), 0 1px 4px 0 rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s ease, transform 0.2s ease;

	&:hover {
		box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.2), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
	}
}

/* Main content wrapper - mobile-first */
.main-content-wrapper {
	width: 100%;
	margin-left: 0;
	transition: margin-left 0.25s ease, width 0.25s ease;

	@media (min-width: 992px) {
		margin-left: 240px;
		width: calc(100vw - 240px);
	}
}

/* Remove sidebar spacing when user is not authenticated */
body:not(.user-authenticated) {
	.main-content-wrapper {
		margin-left: 0 !important;
		width: 100% !important;

		@media (min-width: 992px) {
			margin-left: 0 !important;
			width: 100% !important;
		}
	}
}

/* Adjust margin and width when sidebar is collapsed (authenticated shell only) */
@media (min-width: 992px) {
	body.user-authenticated.sidebar-collapsed .main-content-wrapper {
		margin-left: 60px;
		width: calc(100vw - 60px);
	}

	html.sidebar-collapsed-on-load body.user-authenticated .main-content-wrapper {
		margin-left: 60px !important;
		width: calc(100vw - 60px) !important;
		transition: none !important;
	}
}

/* Page wrapper - Mobile-first */
.page-wrapper {
	padding: 1.25rem 1rem;
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	background-color: var(--clr-background);

	@media (min-width: 768px) {
		padding: 1.5rem 1.75rem;
	}
}

/* Dashboard pages get double the width */
/* body.layout-dashboard .page-wrapper {
	max-width: 3200px;
} */

/* Fullscreen pages (workspace, compare): remove constraints, card-matching inset */
body.layout-fullscreen .page-wrapper {
	padding: 1.5rem 2.5rem 2.5rem 1.5rem !important;
	max-width: none !important;
	margin: 0 !important;
	box-sizing: border-box;
}

/*
 * Workspace: topbar lives outside .page-wrapper; sidebar is fixed so it may not
 * stretch the Bootstrap row — force shell height so the map / Cesium panes get
 * a non-zero flex basis.
 */
body.layout-workspace .container-fluid>.row.g-0 {
	min-height: 100vh;
	min-height: 100dvh;
	/*
	 * Bootstrap .row > * { width:100% } forces sidebar + main onto two flex lines.
	 * That breaks height: (1) align-content:stretch grew the first line (~50vh empty).
	 * (2) align-content:flex-start fixed that but left the second line with no stretched
	 * cross-size, collapsing .main-content-wrapper (~114px) and emptying the workspace.
	 * Keep one row: zero-width in-flow sidebar (real nav is position:fixed) + flex main.
	 */
	flex-wrap: nowrap;
	align-items: stretch;
}

body.layout-workspace .container-fluid>.row.g-0>.sidebar-wrapper {
	flex: 0 0 0;
	width: 0 !important;
	max-width: none !important;
	min-width: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: visible;
}

body.layout-workspace .container-fluid>.row.g-0>.main-content-wrapper {
	/* flex shorthand overrides Bootstrap .row > * { flex-shrink:0; width:100% } */
	flex: 1 1 0%;
	min-width: 0;
	max-width: none !important;
}

body.layout-workspace.user-authenticated .main-content-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	align-self: stretch;
}

/* Workspace-specific: fill viewport and prevent scroll */
body.layout-workspace .page-wrapper {
	padding: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	flex: 1 1 0;
	min-height: 0;
	height: calc(100dvh - var(--app-header-height, 3.125rem));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
}

body.layout-workspace .page-content {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Non-authenticated layout adjustments */
body:not(.user-authenticated) {
	.page-wrapper {

		/* Remove all padding and prevent overflow on login page */
		&:has(.login-page-wrapper) {
			padding: 0 !important;
			height: 100vh;
			overflow: hidden;
			max-width: 100%;
			/* Login pages should be full-width */
		}
	}

	.main-content-wrapper:has(.login-page-wrapper) {
		height: 100vh;
		overflow: hidden;
	}
}

/* Responsive plot/map containers - mobile-first */
.plot-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	background-color: black;
	margin-bottom: var(--mg-400);

	>div {
		width: 100% !important;
		max-width: 100% !important;
	}

	@media (min-width: 768px) {
		flex: 1 1 calc(50% - var(--mg-400));
		min-width: 0;
		/* Allow flex items to shrink below content size */
		margin-bottom: 0;
	}
}

/* Flex containers with plots - Mobile-first (stack vertically) */
.d-flex.justify-content-center.gap-4 {
	flex-wrap: wrap;
	flex-direction: column;
	align-items: stretch;
	gap: var(--mg-400);

	/* Progressive enhancement: Side-by-side on larger screens */
	@media (min-width: 768px) {
		flex-direction: row;
		align-items: center;
	}
}