/*
 * Bootstrap 4 -> 5.3.8 utility-class compatibility shim.
 *
 * Part of the Bootstrap 5.3.8 standardization: hundreds of Blade views
 * across the app still use Bootstrap 4 utility class names (form-group,
 * mr-*/ml-*/pr-*/pl-*, text-left/right, float-left/right, no-gutters,
 * font-weight-*, badge-<color>, sr-only) that Bootstrap 5's CSS no longer
 * defines - under real Bootstrap 5 these classes are simply absent from the
 * stylesheet and silently do nothing (lost spacing/alignment/badge color/
 * hidden-but-not-visually-hidden text), a purely cosmetic regression rather
 * than a functional one. Rewriting every occurrence across ~40+ views is a
 * large, error-prone visual-QA sweep on its own; this file instead
 * reproduces the exact old Bootstrap 4 behavior for those specific class
 * names so existing markup keeps looking the way it already did, without
 * touching the views themselves. New/edited markup should still use the
 * real Bootstrap 5 names (ms-/me-/text-start/end/text-bg-*/visually-hidden/
 * fw-*) going forward - don't write new BS4-style classes relying on this
 * file.
 */

.form-group {
	margin-bottom: 1rem;
}

.form-row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -5px;
	margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
	padding-right: 5px;
	padding-left: 5px;
}

.no-gutters {
	margin-right: 0;
	margin-left: 0;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
	padding-right: 0;
	padding-left: 0;
}

.text-left {
	text-align: left !important;
}
.text-right {
	text-align: right !important;
}

.float-left {
	float: left !important;
}
.float-right {
	float: right !important;
}

.font-weight-bold {
	font-weight: 700 !important;
}
.font-weight-bolder {
	font-weight: bolder !important;
}
.font-weight-normal {
	font-weight: 400 !important;
}
.font-weight-light {
	font-weight: 300 !important;
}

.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.badge-pill {
	border-radius: 10rem;
}
.badge-primary {
	color: #fff;
	background-color: var(--bs-primary, #0d6efd);
}
.badge-secondary {
	color: #fff;
	background-color: var(--bs-secondary, #6c757d);
}
.badge-success {
	color: #fff;
	background-color: var(--bs-success, #198754);
}
.badge-danger {
	color: #fff;
	background-color: var(--bs-danger, #dc3545);
}
.badge-warning {
	color: #000;
	background-color: var(--bs-warning, #ffc107);
}
.badge-info {
	color: #000;
	background-color: var(--bs-info, #0dcaf0);
}
.badge-light {
	color: #000;
	background-color: var(--bs-light, #f8f9fa);
}
.badge-dark {
	color: #fff;
	background-color: var(--bs-dark, #212529);
}

/* margin/padding scale matches Bootstrap 4's default $spacers (0, .25, .5, 1, 1.5, 3rem) */
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: .25rem !important; }
.ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: .25rem !important; }
.pr-2 { padding-right: .5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: .25rem !important; }
.pl-2 { padding-left: .5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }