/* Bootstrap 4 to 5 Compatibility Layer */
/* Spacing utilities */
.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; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Float utilities */
.float-left { float: left !important; }
.float-right { float: right !important; }

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

/* Badge variants */
.badge-primary { background-color: var(--bs-primary, #0d6efd); color: #fff; }
.badge-secondary { background-color: var(--bs-secondary, #6c757d); color: #fff; }
.badge-success { background-color: var(--bs-success, #198754); color: #fff; }
.badge-danger { background-color: var(--bs-danger, #dc3545); color: #fff; }
.badge-warning { background-color: var(--bs-warning, #ffc107); color: #212529; }
.badge-info { background-color: var(--bs-info, #0dcaf0); color: #212529; }

/* Close button fallback */
.close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  font-weight: 700;
  opacity: 0.5;
  cursor: pointer;
}
.close:hover { opacity: 0.75; }