:root {
	/* --- System Workspace Colors --- */
	--desktop-bg: #f8f9fa;
	--taskbar-bg: #f1f3f5;
	--taskbar-border: #ced4da;
	--taskbar-item-bg: #ffffff;
	--taskbar-item-text: #212529;
	--taskbar-item-accent: #0d6efd;
	--taskbar-item-shadow: rgba(0, 0, 0, 0.15);
	/* --- Window Structural Colors --- */
	--header-bg-dormant: #f1f3f5;
	--header-border-dormant: #dee2e6;
	--header-bg-active: #e7f5ff;
	--header-border-active: #a5d8ff;
	--window-shadow-topmost: rgba(0, 0, 0, 0.3);
	/* --- Window Action Controls --- */
	--btn-text-dormant: #495057;
	--btn-text-active: #212529;
	--btn-hover-bg-dormant: #e9ecef;
	--btn-hover-bg-active: #d0ebff;
	--btn-close-hover-bg: #e81123;
	--btn-close-hover-text: #ffffff;
	/* --- UI Interaction Feedback Accents --- */
	--edge-warning-red: #e8112385;
	--limit-reached-glow: rgba(13, 110, 253, 0.6);
}

/* --- Base Body Structural Reset --- */
body.gui 
{
	display: grid;
	grid-template-rows: auto 1fr;
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: hidden;
}

#desktop {
	grid-row: 2;
	position: relative !important;
	height: 100% !important;
	width: 100% !important;
	padding: 0.2em !important;
	box-sizing: border-box;
	/* CRITICAL CORRECTION: Forces a hard block on the grid container layer.
     This stops the animation tracking from bloating the parent container mesh. */
	overflow: hidden !important;
}

#dialogs {
	position: absolute !important;
	top: 0.4em;
	left: 0.4em;
	bottom: 0.4em;
	right: 0.4em;

	/* Retain standard browser engine parameters for active drag expansions */
	overflow: auto !important;
}

/* --- THE DEFINITIVE WORKSPACE SCROLLBAR SUPPRESSOR --- */
/* When any window is actively running a slide path, force scrollbars away globally */
	#dialogs[data-animating="true"] {
		overflow: hidden !important;
	}

.modeless.modal.show {
	display: block !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	overflow: visible !important;
}

.modeless.modal .modal-dialog {
	position: absolute !important;
	margin: 0 !important;
	max-width: none !important;
	pointer-events: auto !important;
	min-width: auto;
	min-height: auto;
}

#dialogs .modal.modeless {
	display: block !important;
	visibility: visible;
	opacity: 1;
	will-change: opacity;
	transition: opacity var(--window-transition-speed, 750ms) ease-in-out, visibility var(--window-transition-speed, 750ms) step-start !important;
}

	#dialogs .modal.modeless .modal-content {
		width: 100% !important;
		height: 100% !important;
		box-sizing: border-box !important;
		position: relative !important;
		transition: box-shadow 0.15s ease-in-out;
	}

.modal.modeless.topMost.show .modal-dialog .modal-content {
	box-shadow: 0 5px 15px var(--window-shadow-topmost);
}

.modeless .modal-body {
	flex: 1 1 auto;
	overflow-y: auto;
}

.modal-content .row {
	height: auto;
}

.modal-content .row > div {
	height: auto;
}

.modal-header {
	background-color: var(--header-bg-dormant);
	border-bottom: 1px solid var(--header-border-dormant);
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 1rem;
	padding-right: 0 !important;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modeless.modal .modal-header {
	cursor: grab;
}

.modeless.modal div.modal-dialog.ui-draggable-dragging .modal-header {
	cursor: grabbing;
}

.modal.modeless.topMost .modal-header, .modal:not(.modeless) .modal-header {
	background-color: var(--header-bg-active);
	border-bottom: 1px solid var(--header-border-active);
}

#dialogs .modal.modeless .window-controls {
	height: 100%;
	display: flex;
	align-items: stretch;
	gap: 0 !important;
}

#dialogs .modal.modeless .btn-window-action {
	height: 40px !important;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	background: transparent;
	border: none;
	border-radius: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--btn-text-dormant);
	font-size: 0.85rem;
	transition: background-color 0.1s, color 0.1s;
}

#dialogs .modal.modeless.topMost .btn-window-action {
	color: var(--btn-text-active);
}

#dialogs .modal.modeless .btn-window-action:hover {
	background-color: var(--btn-hover-bg-dormant);
	color: #000;
}

#dialogs .modal.modeless.topMost .btn-window-action:hover {
	background-color: var(--btn-hover-bg-active);
}

#dialogs .modal.modeless .btn-window-action:focus,
#dialogs .modal.modeless .btn-window-action:active,
#dialogs .modal.modeless .btn-window-action:focus-visible {
	box-shadow: none !important;
	outline: none !important;
	background-color: transparent;
}

	#dialogs .modal.modeless .btn-window-action:focus:hover {
		background-color: var(--btn-hover-bg-dormant);
	}

#dialogs .modal.modeless.topMost .btn-window-action:focus:hover {
	background-color: var(--btn-hover-bg-active);
}

#dialogs .modal.modeless .btn-window-action[data-do="closeDialog"]
{
	border-top-right-radius: 6px !important;
}

#dialogs .modal.modeless .btn-window-action[data-do="closeDialog"]:hover,
#dialogs .modal.modeless .btn-window-action[data-do="closeDialog"]:focus:hover
{
	background-color: var(--btn-close-hover-bg) !important;
	color: var(--btn-close-hover-text) !important;
}

.bm-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	z-index: 1060;
	box-sizing: border-box !important;
	background-color: transparent !important;
	transition: border-color 0.1s ease;
}

.bm-resizable-n {
	top: -2px;
	left: 0;
	width: 100%;
	height: 4px;
	cursor: ns-resize;
}

.bm-resizable-s {
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 4px;
	cursor: ns-resize;
}

.bm-resizable-e {
	right: -2px;
	top: 0;
	height: 100%;
	width: 4px;
	cursor: ew-resize;
}

.bm-resizable-w {
	left: -2px;
	top: 0;
	height: 100%;
	width: 4px;
	cursor: ew-resize;
}

.bm-resizable-n.bm-edge-locked {
	border-top: 2px solid var(--edge-warning-red) !important;
	margin: 0 8px;
	width: calc(100% - 16px);
}

.bm-resizable-s.bm-edge-locked {
	border-bottom: 2px solid var(--edge-warning-red) !important;
	margin: 0 8px;
	width: calc(100% - 16px);
}

.bm-resizable-e.bm-edge-locked {
	border-right: 2px solid var(--edge-warning-red) !important;
	margin: 8px 0;
	height: calc(100% - 16px);
}

.bm-resizable-w.bm-edge-locked {
	border-left: 2px solid var(--edge-warning-red) !important;
	margin: 8px 0;
	height: calc(100% - 16px);
}

.bm-resizable-ne {
	top: -4px;
	right: -4px;
	width: 10px;
	height: 10px;
	cursor: nesw-resize;
}

.bm-resizable-nw {
	top: -4px;
	left: -4px;
	width: 10px;
	height: 10px;
	cursor: nwse-resize;
}

.bm-resizable-sw {
	bottom: -4px;
	left: -4px;
	width: 10px;
	height: 10px;
	cursor: nesw-resize;
}

.bm-resizable-se {
	bottom: 1px;
	right: 1px;
	width: 12px;
	height: 12px;
	cursor: nwse-resize;
	z-index: 1065 !important;
}

	.bm-resizable-se::after {
		content: "" !important;
		position: absolute !important;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 1 !important;
		transition: none !important;
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAKElEQVR4nGNkwAH279//n4GBgYEJlwKiASM2Yx0dHRmpaAU2Y0myAgBY+BW+omgz5wAAAABJRU5ErkJggg==") !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
		image-rendering: pixelated !important;
		image-rendering: crisp-edges !important;
		-ms-interpolation-mode: nearest-neighbor !important;
		border: none;
		pointer-events: none;
	}

#dialogs .modal.modeless .modal-content.bm-limit-reached {
	box-shadow: 0 0 12px var(--limit-reached-glow) !important;
}

.ui-resizable-se::after {
	content: "";
	position: absolute;
	right: 4px;
	bottom: 4px;
	width: 6px;
	height: 6px;
	border-right: 2px solid #6c757d;
	border-bottom: 2px solid #6c757d;
	opacity: 0.5;
}

#dialogs-taskbar {
	position: absolute !important;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: 40px;
	background-color: transparent !important;
	border-top: none !important;
	z-index: 99999;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap-reverse;
	padding: 10px;
	gap: 8px;
	box-sizing: border-box;
	pointer-events: none !important;
}

.dialog-taskbar-item {
	height: 32px;
	width: 160px;
	flex-shrink: 0;
	background-color: var(--taskbar-item-bg);
	border: 1px solid var(--taskbar-border);
	border-bottom: 3px solid var(--taskbar-item-accent);
	color: var(--taskbar-item-text);
	padding: 0 12px;
	font-size: 0.75rem;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	/*display: flex;*/
	align-items: center;
	box-sizing: border-box;
	box-shadow: 0 2px 5px var(--taskbar-item-shadow);
	transition: background-color 0.1s;
	pointer-events: auto !important;
}

	.dialog-taskbar-item:hover {
		background-color: var(--btn-hover-bg-dormant);
	}

#dialogs .modal.modeless .modal-dialog {
	will-change: transform;
	transition: transform var(--window-transition-speed, 750ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
	transform: none;
}

#dialogs .modal.modeless.minimising-state .modal-dialog {
	/* Maintain the smooth 0.75s animation trajectory on the inner container */
	transition: transform 0.75s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

#dialogs .modal.modeless.minimising-state {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity var(--window-transition-speed, 750ms) ease-in-out, visibility var(--window-transition-speed, 750ms) step-end !important;
}

#dialogs.animating {
	overflow: auto !important; /* No longer needed */
}

/* --- THE ACTIVE TRANSITIONING CONTROLLER --- */
#dialogs .modal.modeless.transitioning-state {
	/* Keeps layout bounds completely isolated while the window is actively scaling up or down */
	contain: paint !important;
	overflow: hidden !important;
}

.modal-cq-root {
	container-type: inline-size;
}

	.modal-cq-root .col-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}

	.modal-cq-root .col-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}

	.modal-cq-root .col-3 {
		flex: 0 0 auto;
		width: 25%;
	}

	.modal-cq-root .col-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}

	.modal-cq-root .col-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}

	.modal-cq-root .col-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.modal-cq-root .col-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}

	.modal-cq-root .col-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}

	.modal-cq-root .col-9 {
		flex: 0 0 auto;
		width: 75%;
	}

	.modal-cq-root .col-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}

	.modal-cq-root .col-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}

	.modal-cq-root .col-12 {
		flex: 0 0 auto;
		width: 100%;
	}

@container (min-width: 576px) {
	.modal-cq-root .col-sm-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}

	.modal-cq-root .col-sm-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}

	.modal-cq-root .col-sm-3 {
		flex: 0 0 auto;
		width: 25%;
	}

	.modal-cq-root .col-sm-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}

	.modal-cq-root .col-sm-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}

	.modal-cq-root .col-sm-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.modal-cq-root .col-sm-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}

	.modal-cq-root .col-sm-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}

	.modal-cq-root .col-sm-9 {
		flex: 0 0 auto;
		width: 75%;
	}

	.modal-cq-root .col-sm-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}

	.modal-cq-root .col-sm-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}

	.modal-cq-root .col-sm-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@container (min-width: 768px) {
	.modal-cq-root .col-md-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}

	.modal-cq-root .col-md-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}

	.modal-cq-root .col-md-3 {
		flex: 0 0 auto;
		width: 25%;
	}

	.modal-cq-root .col-md-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}

	.modal-cq-root .col-md-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}

	.modal-cq-root .col-md-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.modal-cq-root .col-md-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}

	.modal-cq-root .col-md-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}

	.modal-cq-root .col-md-9 {
		flex: 0 0 auto;
		width: 75%;
	}

	.modal-cq-root .col-md-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}

	.modal-cq-root .col-md-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}

	.modal-cq-root .col-md-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@container (min-width: 992px) {
	.modal-cq-root .col-lg-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}

	.modal-cq-root .col-lg-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}

	.modal-cq-root .col-lg-3 {
		flex: 0 0 auto;
		width: 25%;
	}

	.modal-cq-root .col-lg-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}

	.modal-cq-root .col-lg-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}

	.modal-cq-root .col-lg-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.modal-cq-root .col-lg-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}

	.modal-cq-root .col-lg-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}

	.modal-cq-root .col-lg-9 {
		flex: 0 0 auto;
		width: 75%;
	}

	.modal-cq-root .col-lg-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}

	.modal-cq-root .col-lg-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}

	.modal-cq-root .col-lg-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@container (min-width: 1200px) {
	.modal-cq-root .col-xl-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}

	.modal-cq-root .col-xl-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}

	.modal-cq-root .col-xl-3 {
		flex: 0 0 auto;
		width: 25%;
	}

	.modal-cq-root .col-xl-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}

	.modal-cq-root .col-xl-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}

	.modal-cq-root .col-xl-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.modal-cq-root .col-xl-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}

	.modal-cq-root .col-xl-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}

	.modal-cq-root .col-xl-9 {
		flex: 0 0 auto;
		width: 75%;
	}

	.modal-cq-root .col-xl-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}

	.modal-cq-root .col-xl-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}

	.modal-cq-root .col-xl-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

@container (min-width: 1400px) {
	.modal-cq-root .col-xxl-1 {
		flex: 0 0 auto;
		width: 8.33333333%;
	}

	.modal-cq-root .col-xxl-2 {
		flex: 0 0 auto;
		width: 16.66666667%;
	}

	.modal-cq-root .col-xxl-3 {
		flex: 0 0 auto;
		width: 25%;
	}

	.modal-cq-root .col-xxl-4 {
		flex: 0 0 auto;
		width: 33.33333333%;
	}

	.modal-cq-root .col-xxl-5 {
		flex: 0 0 auto;
		width: 41.66666667%;
	}

	.modal-cq-root .col-xxl-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.modal-cq-root .col-xxl-7 {
		flex: 0 0 auto;
		width: 58.33333333%;
	}

	.modal-cq-root .col-xxl-8 {
		flex: 0 0 auto;
		width: 66.66666667%;
	}

	.modal-cq-root .col-xxl-9 {
		flex: 0 0 auto;
		width: 75%;
	}

	.modal-cq-root .col-xxl-10 {
		flex: 0 0 auto;
		width: 83.33333333%;
	}

	.modal-cq-root .col-xxl-11 {
		flex: 0 0 auto;
		width: 91.66666667%;
	}

	.modal-cq-root .col-xxl-12 {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* ==========================================================================
   CSS VARIABLES FOR SPACING SCALE
   ========================================================================== */
:root {
	--spacer: 1rem;
	--space-0: 0;
	--space-1: calc(var(--spacer) * 0.25); /*  4px / 0.25rem */
	--space-2: calc(var(--spacer) * 0.5); /*  8px / 0.5rem  */
	--space-3: var(--spacer); /* 16px / 1rem    */
	--space-4: calc(var(--spacer) * 1.5); /* 24px / 1.5rem  */
	--space-5: calc(var(--spacer) * 3); /* 48px / 3rem    */
}

/* ==========================================================================
   BASE SPACING UTILITIES (Scoped within .modal-cq-root)
   ========================================================================== */

/* MARGINS */
.modal-cq-root .m-0 {
	margin: var(--space-0) !important;
}

.modal-cq-root .m-1 {
	margin: var(--space-1) !important;
}

.modal-cq-root .m-2 {
	margin: var(--space-2) !important;
}

.modal-cq-root .m-3 {
	margin: var(--space-3) !important;
}

.modal-cq-root .m-4 {
	margin: var(--space-4) !important;
}

.modal-cq-root .m-5 {
	margin: var(--space-5) !important;
}

.modal-cq-root .m-auto {
	margin: auto !important;
}

/* Top / Bottom / Left / Right / Axis Margins */
.modal-cq-root .mt-0 {
	margin-top: var(--space-0) !important;
}

.modal-cq-root .mt-1 {
	margin-top: var(--space-1) !important;
}

.modal-cq-root .mt-2 {
	margin-top: var(--space-2) !important;
}

.modal-cq-root .mt-3 {
	margin-top: var(--space-3) !important;
}

.modal-cq-root .mt-4 {
	margin-top: var(--space-4) !important;
}

.modal-cq-root .mt-5 {
	margin-top: var(--space-5) !important;
}

.modal-cq-root .mb-0 {
	margin-bottom: var(--space-0) !important;
}

.modal-cq-root .mb-1 {
	margin-bottom: var(--space-1) !important;
}

.modal-cq-root .mb-2 {
	margin-bottom: var(--space-2) !important;
}

.modal-cq-root .mb-3 {
	margin-bottom: var(--space-3) !important;
}

.modal-cq-root .mb-4 {
	margin-bottom: var(--space-4) !important;
}

.modal-cq-root .mb-5 {
	margin-bottom: var(--space-5) !important;
}

.modal-cq-root .ms-0 {
	margin-inline-start: var(--space-0) !important;
}

.modal-cq-root .ms-1 {
	margin-inline-start: var(--space-1) !important;
}

.modal-cq-root .ms-2 {
	margin-inline-start: var(--space-2) !important;
}

.modal-cq-root .ms-3 {
	margin-inline-start: var(--space-3) !important;
}

.modal-cq-root .ms-4 {
	margin-inline-start: var(--space-4) !important;
}

.modal-cq-root .ms-5 {
	margin-inline-start: var(--space-5) !important;
}

.modal-cq-root .me-0 {
	margin-inline-end: var(--space-0) !important;
}

.modal-cq-root .me-1 {
	margin-inline-end: var(--space-1) !important;
}

.modal-cq-root .me-2 {
	margin-inline-end: var(--space-2) !important;
}

.modal-cq-root .me-3 {
	margin-inline-end: var(--space-3) !important;
}

.modal-cq-root .me-4 {
	margin-inline-end: var(--space-4) !important;
}

.modal-cq-root .me-5 {
	margin-inline-end: var(--space-5) !important;
}

.modal-cq-root .mx-0 {
	margin-inline: var(--space-0) !important;
}

.modal-cq-root .mx-1 {
	margin-inline: var(--space-1) !important;
}

.modal-cq-root .mx-2 {
	margin-inline: var(--space-2) !important;
}

.modal-cq-root .mx-3 {
	margin-inline: var(--space-3) !important;
}

.modal-cq-root .mx-4 {
	margin-inline: var(--space-4) !important;
}

.modal-cq-root .mx-5 {
	margin-inline: var(--space-5) !important;
}

.modal-cq-root .my-0 {
	margin-block: var(--space-0) !important;
}

.modal-cq-root .my-1 {
	margin-block: var(--space-1) !important;
}

.modal-cq-root .my-2 {
	margin-block: var(--space-2) !important;
}

.modal-cq-root .my-3 {
	margin-block: var(--space-3) !important;
}

.modal-cq-root .my-4 {
	margin-block: var(--space-4) !important;
}

.modal-cq-root .my-5 {
	margin-block: var(--space-5) !important;
}

/* PADDINGS */
.modal-cq-root .p-0 {
	padding: var(--space-0) !important;
}

.modal-cq-root .p-1 {
	padding: var(--space-1) !important;
}

.modal-cq-root .p-2 {
	padding: var(--space-2) !important;
}

.modal-cq-root .p-3 {
	padding: var(--space-3) !important;
}

.modal-cq-root .p-4 {
	padding: var(--space-4) !important;
}

.modal-cq-root .p-5 {
	padding: var(--space-5) !important;
}

.modal-cq-root .pt-0 {
	padding-top: var(--space-0) !important;
}

.modal-cq-root .pt-1 {
	padding-top: var(--space-1) !important;
}

.modal-cq-root .pt-2 {
	padding-top: var(--space-2) !important;
}

.modal-cq-root .pt-3 {
	padding-top: var(--space-3) !important;
}

.modal-cq-root .pt-4 {
	padding-top: var(--space-4) !important;
}

.modal-cq-root .pt-5 {
	padding-top: var(--space-5) !important;
}

.modal-cq-root .pb-0 {
	padding-bottom: var(--space-0) !important;
}

.modal-cq-root .pb-1 {
	padding-bottom: var(--space-1) !important;
}

.modal-cq-root .pb-2 {
	padding-bottom: var(--space-2) !important;
}

.modal-cq-root .pb-3 {
	padding-bottom: var(--space-3) !important;
}

.modal-cq-root .pb-4 {
	padding-bottom: var(--space-4) !important;
}

.modal-cq-root .pb-5 {
	padding-bottom: var(--space-5) !important;
}

.modal-cq-root .ps-0 {
	padding-inline-start: var(--space-0) !important;
}

.modal-cq-root .ps-1 {
	padding-inline-start: var(--space-1) !important;
}

.modal-cq-root .ps-2 {
	padding-inline-start: var(--space-2) !important;
}

.modal-cq-root .ps-3 {
	padding-inline-start: var(--space-3) !important;
}

.modal-cq-root .ps-4 {
	padding-inline-start: var(--space-4) !important;
}

.modal-cq-root .ps-5 {
	padding-inline-start: var(--space-5) !important;
}

.modal-cq-root .pe-0 {
	padding-inline-end: var(--space-0) !important;
}

.modal-cq-root .pe-1 {
	padding-inline-end: var(--space-1) !important;
}

.modal-cq-root .pe-2 {
	padding-inline-end: var(--space-2) !important;
}

.modal-cq-root .pe-3 {
	padding-inline-end: var(--space-3) !important;
}

.modal-cq-root .pe-4 {
	padding-inline-end: var(--space-4) !important;
}

.modal-cq-root .pe-5 {
	padding-inline-end: var(--space-5) !important;
}

.modal-cq-root .px-0 {
	padding-inline: var(--space-0) !important;
}

.modal-cq-root .px-1 {
	padding-inline: var(--space-1) !important;
}

.modal-cq-root .px-2 {
	padding-inline: var(--space-2) !important;
}

.modal-cq-root .px-3 {
	padding-inline: var(--space-3) !important;
}

.modal-cq-root .px-4 {
	padding-inline: var(--space-4) !important;
}

.modal-cq-root .px-5 {
	padding-inline: var(--space-5) !important;
}

.modal-cq-root .py-0 {
	padding-block: var(--space-0) !important;
}

.modal-cq-root .py-1 {
	padding-block: var(--space-1) !important;
}

.modal-cq-root .py-2 {
	padding-block: var(--space-2) !important;
}

.modal-cq-root .py-3 {
	padding-block: var(--space-3) !important;
}

.modal-cq-root .py-4 {
	padding-block: var(--space-4) !important;
}

.modal-cq-root .py-5 {
	padding-block: var(--space-5) !important;
}


/* ==========================================================================
   CONTAINER QUERY BREAKPOINTS (Scoped under .modal-cq-root)
   ========================================================================== */

/* SMALL CONTAINER BREAKPOINT (sm >= 576px) */
@container (min-width: 576px) {
	.modal-cq-root .p-sm-0 {
		padding: var(--space-0) !important;
	}

	.modal-cq-root .p-sm-3 {
		padding: var(--space-3) !important;
	}

	.modal-cq-root .p-sm-4 {
		padding: var(--space-4) !important;
	}

	.modal-cq-root .mb-sm-3 {
		margin-bottom: var(--space-3) !important;
	}

	.modal-cq-root .mb-sm-0 {
		margin-bottom: var(--space-0) !important;
	}
}

/* MEDIUM CONTAINER BREAKPOINT (md >= 768px) */
@container (min-width: 768px) {
	.modal-cq-root .p-md-0 {
		padding: var(--space-0) !important;
	}

	.modal-cq-root .p-md-3 {
		padding: var(--space-3) !important;
	}

	.modal-cq-root .p-md-4 {
		padding: var(--space-4) !important;
	}

	.modal-cq-root .p-md-5 {
		padding: var(--space-5) !important;
	}

	.modal-cq-root .px-md-4 {
		padding-inline: var(--space-4) !important;
	}

	.modal-cq-root .mb-md-3 {
		margin-bottom: var(--space-3) !important;
	}

	.modal-cq-root .mb-md-0 {
		margin-bottom: var(--space-0) !important;
	}
}

/* LARGE CONTAINER BREAKPOINT (lg >= 992px) */
@container (min-width: 992px) {
	.modal-cq-root .p-lg-4 {
		padding: var(--space-4) !important;
	}

	.modal-cq-root .p-lg-5 {
		padding: var(--space-5) !important;
	}

	.modal-cq-root .px-lg-5 {
		padding-inline: var(--space-5) !important;
	}
}





/* --- 1. LIFT PARENT SELECTION CONSTRAINT WHEN MAXIMISED --- */
/* When a nested child dialog is full-sized, force the outer modal container 
   to override its 0x0 size rule so the inner absolute pinning calculations work */
#dialogs .modal.modeless:has(.is-maximised) {
	width: 100% !important;
	height: 100% !important;
}

#dialogs .modal.modeless .modal-dialog.is-maximised {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	max-width: none !important;
	max-height: none !important;
	/* FIX: Tells the browser to use your custom parameter duration value instead of a static 0.25s */
	transition: top var(--window-transition-speed, 750ms) cubic-bezier(0.25, 1, 0.5, 1), left var(--window-transition-speed, 750ms) cubic-bezier(0.25, 1, 0.5, 1), right var(--window-transition-speed, 750ms) cubic-bezier(0.25, 1, 0.5, 1), bottom var(--window-transition-speed, 750ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Ensure the warning handle bars drop out of layout calculations when full-sized */
#dialogs .modal.modeless .modal-dialog.is-maximised .bm-resizable-handle 
{
	display: none !important;
}

/* --- THE ACTIVE UN-MAXIMISING RESTORATION SHIELD --- */
/* This temporary state mimics full-screen coverage but strips the 'auto !important' tags
   so the browser can smoothly calculate a sliding pixel transition back down to size */
#dialogs .modal.modeless .modal-dialog.is-restoring {
	/* Inherit full screen wrapper rules so your background clicks remain managed */
	margin: 0 !important;
	max-width: none !important;
	max-height: none !important;
	/* Hard lock the transition directly onto the inner layout dimensions */
	transition: top var(--window-transition-speed, 750ms) cubic-bezier(0.25, 1, 0.5, 1), left var(--window-transition-speed, 750ms) cubic-bezier(0.25, 1, 0.5, 1), width var(--window-transition-speed, 750ms) cubic-bezier(0.25, 1, 0.5, 1), height var(--window-transition-speed, 750ms) cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Ensure the outer modal wrapper stays full-sized while restoring */
#dialogs .modal.modeless:has(.is-restoring) {
	width: 100% !important;
	height: 100% !important;
}

/* Ensure warning handle bars stay hidden while actively mid-flight */
#dialogs .modal.modeless .modal-dialog.is-restoring .bm-resizable-handle {
	display: none !important;
}