/*
 * Bootstrap 4 -> 5 compatibility shim.
 *
 * Bootstrap 5 renamed or removed several utility classes that are still used
 * throughout this application's markup. Rather than rewriting thousands of
 * class usages (which risks regressions), this file re-declares the old
 * Bootstrap 4 class names by mapping them onto their Bootstrap 5 equivalents.
 *
 * Load this AFTER bootstrap.min.css so it can reference Bootstrap's utilities.
 * Data attribute renames (data-toggle -> data-bs-toggle, etc.) cannot be
 * shimmed with CSS and were updated directly in the markup.
 */

/* --- Text alignment (text-left/right -> text-start/end) --- */
.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/right -> float-start/end) --- */
.float-left { float: left !important; }
.float-right { float: right !important; }
.pull-left { float: left !important; }
.pull-right { float: right !important; }

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

/* --- Font style --- */
.font-italic { font-style: italic !important; }

/* --- Grid gutters (no-gutters -> g-0) --- */
.no-gutters {
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* --- Screen reader utilities (sr-only -> visually-hidden) --- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sr-only-focusable:not(:focus) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Directional spacing (ml-*/mr-* -> ms-*/me-*, pl-*/pr-* -> ps-*/pe-*) --- */
.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; }

/* Responsive variants for directional spacing */
@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; }
}

/* --- Badges (badge-* -> bg-*, and .badge base pill behaviour) --- */
.badge-primary { color: #fff; background-color: #0d6efd; }
.badge-secondary { color: #fff; background-color: #6c757d; }
.badge-success { color: #fff; background-color: #198754; }
.badge-danger { color: #fff; background-color: #dc3545; }
.badge-warning { color: #000; background-color: #ffc107; }
.badge-info { color: #000; background-color: #0dcaf0; }
.badge-light { color: #000; background-color: #f8f9fa; }
.badge-dark { color: #fff; background-color: #212529; }

/* --- Close button (.close -> .btn-close) --- */
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    background-color: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.close:hover {
    color: #000;
    text-decoration: none;
    opacity: .75;
}

/* --- Form row (form-row -> row with small gutters) --- */
.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;
}

/* --- Input group append/prepend (removed in BS5) --- */
.input-group-prepend,
.input-group-append {
    display: flex;
}
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    display: flex;
    align-items: center;
}

/* --- Custom form controls (custom-select -> form-select, etc.) --- */
.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    vertical-align: middle;
    background: #fff 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") no-repeat right 0.75rem center/8px 10px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    appearance: none;
}