.bs-shell {
	min-height: 100vh;
}

.bs-shell .bs-sidebar {
	--bs-offcanvas-width: 280px;
	flex: 0 0 280px;
	width: 280px;
	/* JD edit */ margin-left:0.5rem;
	transition: flex-basis 0.18s ease, width 0.18s ease;
}

.bs-shell > .d-lg-flex > .flex-grow-1 {
	min-width: 0;
}

.bs-shell .bs-sidebar .offcanvas-header {
	padding: 1rem 1.25rem;
}

.bs-shell .bs-sidebar-content {
	padding: 1.25rem;
	transition: padding 0.18s ease;
}

/* Sidebar brand: a header band sized to match the topbar height, so the logo
   reads as a proper brand instead of a small mark tucked in the corner. The
   bottom border lines up with the topbar's border for one continuous header rule. */
.bs-shell .bs-sidebar-brand {
	min-height: 70px;
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
	line-height: 1.1;
	border-bottom: 1px solid var(--bs-border-color);
}

.bs-shell .bs-sidebar-brand .bi {
	font-size: 2rem;
}

.bs-shell .bs-sidebar-toggle {
	aspect-ratio: 1;
	width: 2.25rem;
	padding: 0;
}

.bs-shell .bs-nav-section-title {
	margin: 1rem 0 0.5rem;
	color: var(--bs-secondary-color);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bs-shell .bs-topbar-subtitle {
	color: var(--bs-secondary-color);
}

.bs-shell .summary-stat {
	font-size: 2rem;
	line-height: 1;
}

.bs-shell .amount {
	text-align: right;
	white-space: nowrap;
}

.bs-shell .table td,
.bs-shell .table th {
	vertical-align: top;
}

.bs-shell .work-links a {
	text-decoration: none;
}

@media (min-width: 992px) {
	.bs-shell .bs-sidebar {
		position: sticky;
		top: 0;
		height: 100vh;
	}

	html.sqat-sidebar-collapsed .bs-shell .bs-sidebar {
		--bs-offcanvas-width: 76px;
		flex-basis: 76px;
		width: 76px;
	}

	html.sqat-sidebar-collapsed .bs-shell .bs-sidebar-content {
		padding: 1rem 0.5rem;
	}

	html.sqat-sidebar-collapsed .bs-shell .bs-sidebar-brand {
		justify-content: center;
		min-height: 70px;
		padding-left: 0;
		padding-right: 0;
	}

	html.sqat-sidebar-collapsed .bs-shell .bs-sidebar-brand .bi {
		font-size: 1.7rem;
	}

	html.sqat-sidebar-collapsed .bs-shell .bs-sidebar-toggle {
		width: 2.25rem;
	}

	html.sqat-sidebar-collapsed .bs-shell .nav-link {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
	}

	html.sqat-sidebar-collapsed .bs-shell .nav-link .bi {
		font-size: 1.1rem;
	}

	html.sqat-sidebar-collapsed .bs-shell .bs-sidebar-label,
	html.sqat-sidebar-collapsed .bs-shell .bs-nav-section-title,
	html.sqat-sidebar-collapsed .bs-shell .bs-sidebar .mt-auto .small {
		display: none !important;
	}
}

/* Placeholder text */
::placeholder {
	color: var(--bs-secondary-color) !important;
	opacity: 0.2 !important;
}

/* User Menu */
.bs-user-menu-toggle {
	width: 38px;
	height: 38px;
	font-weight: 600;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
}

.bs-user-menu-toggle:hover {
	background-color: var(--bs-gray-200) !important;
	border-color: var(--bs-gray-300) !important;
}

.bs-user-menu .dropdown-menu {
	min-width: 220px;
	margin-top: 0.5rem !important;
}

.bs-user-menu .dropdown-header {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--bs-border-color-light);
	margin-bottom: 0.25rem;
}

/* Notifications */
.bs-notification-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: var(--bs-secondary-color);
	background: none;
	border: none;
	font-size: 1.25rem;
	line-height: 1;
	transition: color 0.15s ease-in-out;
}

.bs-notification-toggle:hover {
	color: var(--bs-primary);
}

.bs-notification-badge {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	transform: translate(25%, -25%);
	font-size: 0.65rem;
	padding: 0.25em 0.45em;
	border: 2px solid white; /* Contrast against the bell */
}

/* Background Tasks */
@keyframes bs-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.bs-task-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	color: var(--bs-secondary-color);
	background: none;
	border: none;
	font-size: 1.25rem;
	line-height: 1;
	transition: color 0.15s ease-in-out;
}

.bs-task-toggle:hover {
	color: var(--bs-primary);
}

.bs-task-toggle.is-active {
	color: var(--bs-primary);
}

.bs-task-toggle.is-active i {
	display: inline-block;
	animation: bs-spin 2s linear infinite;
}

.bs-task-badge {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	transform: translate(25%, -25%);
	font-size: 0.65rem;
	padding: 0.25em 0.45em;
	border: 2px solid white;
}

.sqat-field-help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	margin-left: 0.25rem;
	padding: 0;
	color: var(--bs-secondary-color);
	background: transparent;
	border: 0;
	line-height: 1;
	vertical-align: baseline;
}

.form-label + .sqat-field-help {
	margin-bottom: 0.5rem;
}

.sqat-field-help:hover,
.sqat-field-help:focus {
	color: var(--bs-primary);
}

.sqat-field-help:focus-visible {
	border-radius: 50%;
	outline: 2px solid rgba(var(--bs-primary-rgb), 0.35);
	outline-offset: 2px;
}

.sqat-field-help .bi {
	font-size: 0.875rem;
	line-height: 1;
}

.sqat-field-help-popover {
	--bs-popover-max-width: 20rem;
	--bs-popover-bg: var(--bs-tertiary-bg);
	font-size: 0.875rem;
}

/* Print: drop the app chrome and lay records out as a clean, full-width document. */
@media print {
	.no-print { display: none !important; }
	#bootstrapPrimaryNav { display: none !important; }
	.bs-shell { background: #fff !important; }
	main#main-content { padding: 0 !important; }
	.card { border: 0 !important; box-shadow: none !important; }
	.card-header { padding-left: 0 !important; padding-right: 0 !important; }
	.card-header .btn { display: none !important; }
	.table { font-size: 11px; }
	.table a { color: inherit !important; text-decoration: none !important; }
	thead { display: table-header-group; } /* repeat column headers on each printed page */
	tr, img { page-break-inside: avoid; }
	@page { margin: 12mm; }
	}

	/* Report diagram preview: inline SVG exported client-side via the hidden draw.io embed iframe. */
	.report-diagram-preview {
	background: #ffffff;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	padding: 1rem;
	overflow: hidden;
	}

	.report-diagram-preview svg {
	display: block;
	max-width: 100%;
	height: auto;
	}

	@media print {
	.report-diagram-preview {
	page-break-inside: avoid;
	border-color: #eee;
	}
	}