/*
 * Bootstrap 4 -> 5 compatibility shim.
 * This app has no RTL requirement, so rather than rewrite every view's
 * ml-/mr-/pl-/pr-/text-left/text-right/float-left/float-right/form-group
 * usage to Bootstrap 5's logical-property utilities, we keep the old
 * class names working with identical values to Bootstrap 5's own spacer scale.
 */

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

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

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.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; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.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; }

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

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

@media (min-width: 576px) {
	.ml-sm-auto { margin-left: auto !important; }
	.mr-sm-auto { margin-right: auto !important; }
}
@media (min-width: 768px) {
	.ml-md-auto { margin-left: auto !important; }
	.mr-md-auto { margin-right: auto !important; }
}
@media (min-width: 992px) {
	.ml-lg-auto { margin-left: auto !important; }
	.mr-lg-auto { margin-right: auto !important; }
}

/*
 * Bootstrap 5 moved the native <select> dropdown appearance (arrow,
 * appearance:none, padding) off of .form-control and onto a dedicated
 * .form-select class. This app's forms were written against Bootstrap 4,
 * where Form::select()/EasyForm selects use .form-control throughout, so
 * without this they render with no visible dropdown affordance at all.
 */
select.form-control {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.25rem !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
}