/*
 * Bootstrap 4 -> 5 visual compatibility shim (app.closebee.com only).
 *
 * Restores two Bootstrap 4 rules Bootstrap 5 removed outright, so existing
 * markup keeps its current spacing/layout without every page needing an
 * edit ("without disturbing the UI layouts", direct instruction):
 *
 *   - .form-group's automatic bottom margin (used in 21+ pages for basic
 *     form field spacing; BS5 dropped it as a formal component, and the
 *     class name alone carries no styling anymore).
 *   - .card-deck's equal-width flex row layout (used in 16+ pages,
 *     including some pages' own card grids; BS5 removed it with no direct
 *     utility-class replacement). Copied verbatim from Bootstrap 4's own
 *     source rather than approximated.
 *   - bootstrap-multiselect's toggle button, whose default buttonClass is
 *     Bootstrap 4's .custom-select (BS5 renamed that to .form-select and
 *     dropped .custom-select's styling entirely), fell back to plain
 *     browser-default <button> padding -- taller than its sibling
 *     .form-control search input in the same input-group ("filter box
 *     height doesn't match the search box", reported directly). The
 *     plugin also wraps its button in its own container div, which breaks
 *     Bootstrap's own ".input-group-sm > .form-control" direct-child
 *     selector, so the fix restates .form-control/.form-control-sm's exact
 *     box model directly against the button's own classes instead.
 *   - .input-group-append/.input-group-prepend wrapper divs (used in 230+
 *     places app-wide, e.g. every search/filter button next to a
 *     .form-control) -- Bootstrap 5 removed these wrappers from its own
 *     markup pattern entirely, so its input-group-sm/lg sizing rule only
 *     targets ".input-group-sm > .btn" (a DIRECT child of .input-group).
 *     Existing markup here still nests the button one level deeper inside
 *     the wrapper div, so it never matched BS5's rule and fell back to a
 *     plain default-sized button next to a properly-small-sized input
 *     ("filter toggle input is smaller than its button", reported
 *     directly, after the multiselect fix above corrected the input's own
 *     height). Restores Bootstrap 4's own equivalent rule, retargeted at
 *     the one-level-deeper nesting this markup actually has.
 */
.form-group {
	margin-bottom: 1rem;
}

.card-deck {
	display: flex;
	flex-direction: column;
}
.card-deck .card {
	margin-bottom: 15px;
}
@media (min-width: 576px) {
	.card-deck {
		flex-flow: row wrap;
		margin-right: -15px;
		margin-left: -15px;
	}
	.card-deck .card {
		display: flex;
		flex: 1 0 0%;
		flex-direction: column;
		margin-right: 15px;
		margin-bottom: 0;
		margin-left: 15px;
	}
}

.multiselect.dropdown-toggle {
	display: inline-flex;
	align-items: center;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	border-radius: 0.25rem;
}
.input-group-sm .multiselect.dropdown-toggle {
	height: calc(1.5em + 0.5rem + 2px);
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	border-radius: 0.2rem;
}

.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text {
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
}
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text {
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
}
