/**
 * Bootstrap 4 to Bootstrap 5 Compatibility Layer
 * This file provides backward compatibility for Bootstrap 4 utility classes
 */

/* Margin Right (mr-*) */
.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; }

/* Margin Left (ml-*) */
.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; }

/* Padding Right (pr-*) */
.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; }

/* Padding Left (pl-*) */
.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; }

/* Responsive Margin Right - Small (sm) */
@media (min-width: 576px) {
    .mr-sm-0 { margin-right: 0 !important; }
    .mr-sm-1 { margin-right: 0.25rem !important; }
    .mr-sm-2 { margin-right: 0.5rem !important; }
    .mr-sm-3 { margin-right: 1rem !important; }
    .mr-sm-4 { margin-right: 1.5rem !important; }
    .mr-sm-5 { margin-right: 3rem !important; }
    .mr-sm-auto { margin-right: auto !important; }
    
    .ml-sm-0 { margin-left: 0 !important; }
    .ml-sm-1 { margin-left: 0.25rem !important; }
    .ml-sm-2 { margin-left: 0.5rem !important; }
    .ml-sm-3 { margin-left: 1rem !important; }
    .ml-sm-4 { margin-left: 1.5rem !important; }
    .ml-sm-5 { margin-left: 3rem !important; }
    .ml-sm-auto { margin-left: auto !important; }
    
    .pr-sm-0 { padding-right: 0 !important; }
    .pr-sm-1 { padding-right: 0.25rem !important; }
    .pr-sm-2 { padding-right: 0.5rem !important; }
    .pr-sm-3 { padding-right: 1rem !important; }
    .pr-sm-4 { padding-right: 1.5rem !important; }
    .pr-sm-5 { padding-right: 3rem !important; }
    
    .pl-sm-0 { padding-left: 0 !important; }
    .pl-sm-1 { padding-left: 0.25rem !important; }
    .pl-sm-2 { padding-left: 0.5rem !important; }
    .pl-sm-3 { padding-left: 1rem !important; }
    .pl-sm-4 { padding-left: 1.5rem !important; }
    .pl-sm-5 { padding-left: 3rem !important; }
}

/* Responsive Margin Right - Medium (md) */
@media (min-width: 768px) {
    .mr-md-0 { margin-right: 0 !important; }
    .mr-md-1 { margin-right: 0.25rem !important; }
    .mr-md-2 { margin-right: 0.5rem !important; }
    .mr-md-3 { margin-right: 1rem !important; }
    .mr-md-4 { margin-right: 1.5rem !important; }
    .mr-md-5 { margin-right: 3rem !important; }
    .mr-md-auto { margin-right: auto !important; }
    
    .ml-md-0 { margin-left: 0 !important; }
    .ml-md-1 { margin-left: 0.25rem !important; }
    .ml-md-2 { margin-left: 0.5rem !important; }
    .ml-md-3 { margin-left: 1rem !important; }
    .ml-md-4 { margin-left: 1.5rem !important; }
    .ml-md-5 { margin-left: 3rem !important; }
    .ml-md-auto { margin-left: auto !important; }
    
    .pr-md-0 { padding-right: 0 !important; }
    .pr-md-1 { padding-right: 0.25rem !important; }
    .pr-md-2 { padding-right: 0.5rem !important; }
    .pr-md-3 { padding-right: 1rem !important; }
    .pr-md-4 { padding-right: 1.5rem !important; }
    .pr-md-5 { padding-right: 3rem !important; }
    
    .pl-md-0 { padding-left: 0 !important; }
    .pl-md-1 { padding-left: 0.25rem !important; }
    .pl-md-2 { padding-left: 0.5rem !important; }
    .pl-md-3 { padding-left: 1rem !important; }
    .pl-md-4 { padding-left: 1.5rem !important; }
    .pl-md-5 { padding-left: 3rem !important; }
}

/* Responsive Margin Right - Large (lg) */
@media (min-width: 992px) {
    .mr-lg-0 { margin-right: 0 !important; }
    .mr-lg-1 { margin-right: 0.25rem !important; }
    .mr-lg-2 { margin-right: 0.5rem !important; }
    .mr-lg-3 { margin-right: 1rem !important; }
    .mr-lg-4 { margin-right: 1.5rem !important; }
    .mr-lg-5 { margin-right: 3rem !important; }
    .mr-lg-auto { margin-right: auto !important; }
    
    .ml-lg-0 { margin-left: 0 !important; }
    .ml-lg-1 { margin-left: 0.25rem !important; }
    .ml-lg-2 { margin-left: 0.5rem !important; }
    .ml-lg-3 { margin-left: 1rem !important; }
    .ml-lg-4 { margin-left: 1.5rem !important; }
    .ml-lg-5 { margin-left: 3rem !important; }
    .ml-lg-auto { margin-left: auto !important; }
    
    .pr-lg-0 { padding-right: 0 !important; }
    .pr-lg-1 { padding-right: 0.25rem !important; }
    .pr-lg-2 { padding-right: 0.5rem !important; }
    .pr-lg-3 { padding-right: 1rem !important; }
    .pr-lg-4 { padding-right: 1.5rem !important; }
    .pr-lg-5 { padding-right: 3rem !important; }
    
    .pl-lg-0 { padding-left: 0 !important; }
    .pl-lg-1 { padding-left: 0.25rem !important; }
    .pl-lg-2 { padding-left: 0.5rem !important; }
    .pl-lg-3 { padding-left: 1rem !important; }
    .pl-lg-4 { padding-left: 1.5rem !important; }
    .pl-lg-5 { padding-left: 3rem !important; }
}

/* Responsive Margin Right - Extra Large (xl) */
@media (min-width: 1200px) {
    .mr-xl-0 { margin-right: 0 !important; }
    .mr-xl-1 { margin-right: 0.25rem !important; }
    .mr-xl-2 { margin-right: 0.5rem !important; }
    .mr-xl-3 { margin-right: 1rem !important; }
    .mr-xl-4 { margin-right: 1.5rem !important; }
    .mr-xl-5 { margin-right: 3rem !important; }
    .mr-xl-auto { margin-right: auto !important; }
    
    .ml-xl-0 { margin-left: 0 !important; }
    .ml-xl-1 { margin-left: 0.25rem !important; }
    .ml-xl-2 { margin-left: 0.5rem !important; }
    .ml-xl-3 { margin-left: 1rem !important; }
    .ml-xl-4 { margin-left: 1.5rem !important; }
    .ml-xl-5 { margin-left: 3rem !important; }
    .ml-xl-auto { margin-left: auto !important; }
    
    .pr-xl-0 { padding-right: 0 !important; }
    .pr-xl-1 { padding-right: 0.25rem !important; }
    .pr-xl-2 { padding-right: 0.5rem !important; }
    .pr-xl-3 { padding-right: 1rem !important; }
    .pr-xl-4 { padding-right: 1.5rem !important; }
    .pr-xl-5 { padding-right: 3rem !important; }
    
    .pl-xl-0 { padding-left: 0 !important; }
    .pl-xl-1 { padding-left: 0.25rem !important; }
    .pl-xl-2 { padding-left: 0.5rem !important; }
    .pl-xl-3 { padding-left: 1rem !important; }
    .pl-xl-4 { padding-left: 1.5rem !important; }
    .pl-xl-5 { padding-left: 3rem !important; }
}

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

@media (min-width: 576px) {
    .text-sm-left { text-align: left !important; }
    .text-sm-right { text-align: right !important; }
}

@media (min-width: 768px) {
    .text-md-left { text-align: left !important; }
    .text-md-right { text-align: right !important; }
}

@media (min-width: 992px) {
    .text-lg-left { text-align: left !important; }
    .text-lg-right { text-align: right !important; }
}

@media (min-width: 1200px) {
    .text-xl-left { text-align: left !important; }
    .text-xl-right { text-align: right !important; }
}

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

@media (min-width: 576px) {
    .float-sm-left { float: left !important; }
    .float-sm-right { float: right !important; }
}

@media (min-width: 768px) {
    .float-md-left { float: left !important; }
    .float-md-right { float: right !important; }
}

@media (min-width: 992px) {
    .float-lg-left { float: left !important; }
    .float-lg-right { float: right !important; }
}

@media (min-width: 1200px) {
    .float-xl-left { float: left !important; }
    .float-xl-right { float: right !important; }
}

/* Font Weight */
.font-weight-light { font-weight: 300 !important; }
.font-weight-lighter { font-weight: lighter !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 700 !important; }
.font-weight-bolder { font-weight: bolder !important; }