/* ==========================================================================
   Bootstrap 4 → 5 Compatibility Layer
   Provides shims for BS4 classes that were removed or renamed in BS5,
   so existing views continue to work without markup changes.
   ========================================================================== */


/* --- Input Group Append/Prepend ---
   BS5 removed .input-group-append and .input-group-prepend wrappers entirely.
   Children (input-group-text, form-control, btn) should be direct children
   of .input-group. "display: contents" makes the old wrapper invisible to
   flexbox so children participate in the parent flex layout. */
.input-group-append,
.input-group-prepend {
	display: contents !important;
}

/* BS5's ".input-group > .form-control" direct-child selector won't reach
   inside the wrapper. Without this, .form-control keeps width:100% and
   wraps to its own line due to .input-group's flex-wrap:wrap. */
.input-group-append>.form-control,
.input-group-prepend>.form-control,
.input-group-append>.form-select,
.input-group-prepend>.form-select {
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	min-width: 0;
}

/* Collapse borders between adjacent items (mirrors BS5's -1px overlap). */
.input-group-append> :not(:first-child),
.input-group-prepend> :not(:first-child) {
	margin-left: calc(var(--bs-border-width, 1px) * -1);
}

/* Zero border-radius on all items inside wrappers so they sit flush. */
.input-group-append>.form-control,
.input-group-append>.input-group-text,
.input-group-append>.btn,
.input-group-prepend>.form-control,
.input-group-prepend>.input-group-text,
.input-group-prepend>.btn {
	border-radius: 0;
}

/* Restore left radius on the first visible item in the group. */
.input-group> :is(.input-group-prepend, .input-group-append):first-child> :first-child,
.input-group> :first-child:is(.input-group-text, .form-control, .btn) {
	border-top-left-radius: var(--bs-border-radius, 0.375rem);
	border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
}

/* Restore right radius on the last visible item in the group. */
.input-group> :is(.input-group-prepend, .input-group-append):last-child> :last-child,
.input-group> :last-child:is(.input-group-text, .form-control, .btn) {
	border-top-right-radius: var(--bs-border-radius, 0.375rem);
	border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
}


/* --- Form Group ---
   BS5 dropped .form-group; spacing is now manual via utilities. */
.form-group {
	margin-bottom: 1rem;
}



/* --- Column padding restoration ---
*/
.col,
[class*="col-"] {
	padding-right: 15px !important;
	padding-left: 15px !important;
}


/* --- Form Row ---
   BS5 replaced .form-row with standard .row + gutter utilities. */
.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;
}


/* --- Spacing Utilities (left/right → start/end) ---
   BS5 renamed ml-* → ms-*, mr-* → me-*, pl-* → ps-*, pr-* → pe-*.
*/

/* -- Spacing scale as CSS variables -- */
[class*="ml-"],
[class*="mr-"],
[class*="pl-"],
[class*="pr-"] {
	--bs4-spacer: 0;
}

[class*="ml-0"],
[class*="mr-0"],
[class*="pl-0"],
[class*="pr-0"] {
	--bs4-spacer: 0;
}

[class*="ml-1"],
[class*="mr-1"],
[class*="pl-1"],
[class*="pr-1"] {
	--bs4-spacer: 0.25rem;
}

[class*="ml-2"],
[class*="mr-2"],
[class*="pl-2"],
[class*="pr-2"] {
	--bs4-spacer: 0.5rem;
}

[class*="ml-3"],
[class*="mr-3"],
[class*="pl-3"],
[class*="pr-3"] {
	--bs4-spacer: 1rem;
}

[class*="ml-4"],
[class*="mr-4"],
[class*="pl-4"],
[class*="pr-4"] {
	--bs4-spacer: 1.5rem;
}

[class*="ml-5"],
[class*="mr-5"],
[class*="pl-5"],
[class*="pr-5"] {
	--bs4-spacer: 3rem;
}

/* -- Apply the variable to the correct property -- */
[class*="ml-"] {
	margin-left: var(--bs4-spacer) !important;
}

[class*="mr-"] {
	margin-right: var(--bs4-spacer) !important;
}

[class*="pl-"] {
	padding-left: var(--bs4-spacer) !important;
}

[class*="pr-"] {
	padding-right: var(--bs4-spacer) !important;
}

/* -- Auto values (not a number, needs explicit override) -- */
.ml-auto,
[class*="ml-auto"] {
	margin-left: auto !important;
}

.mr-auto,
[class*="mr-auto"] {
	margin-right: auto !important;
}


/* --- Badge Pill ---
   BS5 replaced .badge-pill with .rounded-pill utility. */
.badge-pill {
	border-radius: 50rem !important;
}


/* --- Float Utilities ---
   BS5 renamed .float-left → .float-start, .float-right → .float-end. */
.float-left {
	float: left !important;
}

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


/* --- Text Alignment Utilities ---
   BS5 renamed .text-left → .text-start, .text-right → .text-end. */
.text-left {
	text-align: left !important;
}

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


/* --- Font Weight Utilities ---
   BS5 renamed .font-weight-* → .fw-*. */
.font-weight-bold {
	font-weight: 700 !important;
}

.font-weight-normal {
	font-weight: 400 !important;
}

.font-weight-light {
	font-weight: 300 !important;
}


/* --- Badge Contextual Classes ---
   BS5 replaced .badge-{color} with .bg-{color} + .text-{color}. */
.badge-primary {
	background-color: var(--bs-primary) !important;
	color: #fff !important;
}

.badge-secondary {
	background-color: var(--bs-secondary) !important;
	color: #000 !important;
}

.badge-success {
	background-color: var(--bs-success) !important;
	color: #fff !important;
}

.badge-danger {
	background-color: var(--bs-danger) !important;
	color: #fff !important;
}

.badge-warning {
	background-color: var(--bs-warning) !important;
	color: #000 !important;
}

.badge-info {
	background-color: var(--bs-info) !important;
	color: #000 !important;
}

.badge-light {
	background-color: var(--bs-light) !important;
	color: #000 !important;
}

.badge-dark {
	background-color: var(--bs-dark) !important;
	color: #fff !important;
}


/* --- Card Deck ---
   BS5 removed .card-deck; use .row + .col with .card inside instead. */
.card-deck {
	display: flex;
	flex-flow: row wrap;
	margin-right: -15px;
	margin-left: -15px;
}

.card-deck .card {
	flex: 1 0 0%;
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
}

/* --- Small / .small Font Size ---
   BS5 changed $small-font-size from 80% to .875em (87.5%).
   Restore the BS4 value */
small,
.small {
	font-size: 80% !important;
}

/* --- Link Underlines ---
   BS5 sets text-decoration: underline on all <a> by default.
   BS4 used none/underline. Restore that pairing.
*/
a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.nav-link:hover,
.nav-link:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.btn:hover,
.btn:focus {
	text-decoration: none;
}

/* --- Column max-width restoration ---
*/

/* xs / no-breakpoint (applies at all widths) */
.col-1  { max-width:  8.333333%; }
.col-2  { max-width: 16.666667%; }
.col-3  { max-width: 25%; }
.col-4  { max-width: 33.333333%; }
.col-5  { max-width: 41.666667%; }
.col-6  { max-width: 50%; }
.col-7  { max-width: 58.333333%; }
.col-8  { max-width: 66.666667%; }
.col-9  { max-width: 75%; }
.col-10 { max-width: 83.333333%; }
.col-11 { max-width: 91.666667%; }
.col-12 { max-width: 100%; }

/* sm ≥ 576 px */
@media (min-width: 576px) {
	.col-sm-1  { max-width:  8.333333%; }
	.col-sm-2  { max-width: 16.666667%; }
	.col-sm-3  { max-width: 25%; }
	.col-sm-4  { max-width: 33.333333%; }
	.col-sm-5  { max-width: 41.666667%; }
	.col-sm-6  { max-width: 50%; }
	.col-sm-7  { max-width: 58.333333%; }
	.col-sm-8  { max-width: 66.666667%; }
	.col-sm-9  { max-width: 75%; }
	.col-sm-10 { max-width: 83.333333%; }
	.col-sm-11 { max-width: 91.666667%; }
	.col-sm-12 { max-width: 100%; }
}

/* md ≥ 768 px */
@media (min-width: 768px) {
	.col-md-1  { max-width:  8.333333%; }
	.col-md-2  { max-width: 16.666667%; }
	.col-md-3  { max-width: 25%; }
	.col-md-4  { max-width: 33.333333%; }
	.col-md-5  { max-width: 41.666667%; }
	.col-md-6  { max-width: 50%; }
	.col-md-7  { max-width: 58.333333%; }
	.col-md-8  { max-width: 66.666667%; }
	.col-md-9  { max-width: 75%; }
	.col-md-10 { max-width: 83.333333%; }
	.col-md-11 { max-width: 91.666667%; }
	.col-md-12 { max-width: 100%; }
}

/* lg ≥ 992 px */
@media (min-width: 992px) {
	.col-lg-1  { max-width:  8.333333%; }
	.col-lg-2  { max-width: 16.666667%; }
	.col-lg-3  { max-width: 25%; }
	.col-lg-4  { max-width: 33.333333%; }
	.col-lg-5  { max-width: 41.666667%; }
	.col-lg-6  { max-width: 50%; }
	.col-lg-7  { max-width: 58.333333%; }
	.col-lg-8  { max-width: 66.666667%; }
	.col-lg-9  { max-width: 75%; }
	.col-lg-10 { max-width: 83.333333%; }
	.col-lg-11 { max-width: 91.666667%; }
	.col-lg-12 { max-width: 100%; }
}

/* xl ≥ 1200 px */
@media (min-width: 1200px) {
	.col-xl-1  { max-width:  8.333333%; }
	.col-xl-2  { max-width: 16.666667%; }
	.col-xl-3  { max-width: 25%; }
	.col-xl-4  { max-width: 33.333333%; }
	.col-xl-5  { max-width: 41.666667%; }
	.col-xl-6  { max-width: 50%; }
	.col-xl-7  { max-width: 58.333333%; }
	.col-xl-8  { max-width: 66.666667%; }
	.col-xl-9  { max-width: 75%; }
	.col-xl-10 { max-width: 83.333333%; }
	.col-xl-11 { max-width: 91.666667%; }
	.col-xl-12 { max-width: 100%; }
}

/* xxl ≥ 1400 px */
@media (min-width: 1400px) {
	.col-xxl-1  { max-width:  8.333333%; }
	.col-xxl-2  { max-width: 16.666667%; }
	.col-xxl-3  { max-width: 25%; }
	.col-xxl-4  { max-width: 33.333333%; }
	.col-xxl-5  { max-width: 41.666667%; }
	.col-xxl-6  { max-width: 50%; }
	.col-xxl-7  { max-width: 58.333333%; }
	.col-xxl-8  { max-width: 66.666667%; }
	.col-xxl-9  { max-width: 75%; }
	.col-xxl-10 { max-width: 83.333333%; }
	.col-xxl-11 { max-width: 91.666667%; }
	.col-xxl-12 { max-width: 100%; }
}


/* --- Info Colour ---
   BS5 changed --bs-info from #17a2b8 (teal) to #0dcaf0 (bright cyan)
   and switched its text to dark. Restore the BS4 teal with white text. */
:root {
	--bs-info: #17a2b8 !important;
	--bs-info-rgb: 23, 162, 184 !important;
}

.bg-info {
	background-color: #17a2b8 !important;
	color: #fff !important;
}

.btn-info {
	background-color: #17a2b8 !important;
	border-color: #17a2b8 !important;
	color: #fff !important;
}

.btn-info:hover {
	background-color: #138496 !important;
	border-color: #117a8b !important;
	color: #fff !important;
}

.badge-info,
.bg-info.badge,
.text-bg-info {
	background-color: #17a2b8 !important;
	color: #fff !important;
}

.text-info {
	color: #17a2b8 !important;
}

.border-info {
	border-color: #17a2b8 !important;
}