/* =============================================
   Bootstrap 3 → 5 Compatibility Shim
   Maps deprecated BS3 classes to BS5 equivalents.
   This allows the upgrade from BS3.3.5 to BS5.3.x
   without rewriting all template class names.
   ============================================= */

/* --- Grid: col-xs-* → col-* (xs is the default in BS5) --- */
/* .row > .col-xs-N overrides BS5's .row > * { width: 100% } (specificity 0-2-0 vs 0-1-0).
   col-xs-12 is NOT given .row > specificity so BS5's col-sm-* can override it at ≥576px. */
.row > .col-xs-1  { flex: 0 0 auto; width: 8.333333%; }
.row > .col-xs-2  { flex: 0 0 auto; width: 16.666667%; }
.row > .col-xs-3  { flex: 0 0 auto; width: 25%; }
.row > .col-xs-4  { flex: 0 0 auto; width: 33.333333%; }
.row > .col-xs-5  { flex: 0 0 auto; width: 41.666667%; }
.row > .col-xs-6  { flex: 0 0 auto; width: 50%; }
.row > .col-xs-7  { flex: 0 0 auto; width: 58.333333%; }
.row > .col-xs-8  { flex: 0 0 auto; width: 66.666667%; }
.row > .col-xs-9  { flex: 0 0 auto; width: 75%; }
.row > .col-xs-10 { flex: 0 0 auto; width: 83.333333%; }
.row > .col-xs-11 { flex: 0 0 auto; width: 91.666667%; }
/* col-xs-12: same as BS5 default (100%), no need for higher specificity */

/* --- Ensure col-sm-* overrides col-xs-* at ≥576px (match specificity 0-2-0) --- */
@media (min-width: 576px) {
    .row > .col-sm-1  { flex: 0 0 auto; width: 8.333333%; }
    .row > .col-sm-2  { flex: 0 0 auto; width: 16.666667%; }
    .row > .col-sm-3  { flex: 0 0 auto; width: 25%; }
    .row > .col-sm-4  { flex: 0 0 auto; width: 33.333333%; }
    .row > .col-sm-5  { flex: 0 0 auto; width: 41.666667%; }
    .row > .col-sm-6  { flex: 0 0 auto; width: 50%; }
    .row > .col-sm-7  { flex: 0 0 auto; width: 58.333333%; }
    .row > .col-sm-8  { flex: 0 0 auto; width: 66.666667%; }
    .row > .col-sm-9  { flex: 0 0 auto; width: 75%; }
    .row > .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
    .row > .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
    .row > .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

/* --- Grid offsets: col-xs-offset-* → offset-* --- */
.col-xs-offset-0  { margin-left: 0; }
.col-xs-offset-1  { margin-left: 8.333333%; }
.col-xs-offset-2  { margin-left: 16.666667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.333333%; }
.col-xs-offset-5  { margin-left: 41.666667%; }
.col-xs-offset-6  { margin-left: 50%; }

/* --- Grid offsets: col-sm-offset-* → offset-sm-* --- */
@media (min-width: 576px) {
    .col-sm-offset-0  { margin-left: 0; }
    .col-sm-offset-1  { margin-left: 8.333333%; }
    .col-sm-offset-2  { margin-left: 16.666667%; }
    .col-sm-offset-3  { margin-left: 25%; }
    .col-sm-offset-4  { margin-left: 33.333333%; }
    .col-sm-offset-5  { margin-left: 41.666667%; }
    .col-sm-offset-6  { margin-left: 50%; }
}

/* --- Visibility: hidden-xs → d-none d-sm-block equivalent --- */
@media (max-width: 575.98px) {
    .hidden-xs { display: none !important; }
}

/* --- Visibility: hidden-print → d-print-none equivalent --- */
@media print {
    .hidden-print { display: none !important; }
}

/* --- Float utilities: pull-left / pull-right → float-start / float-end --- */
/* Note: floats are ignored inside flex containers (BS5 .row uses flexbox).
   For grid column ordering, use order property. For non-flex contexts, keep float. */
.pull-left  { float: left !important; }
.pull-right { float: right !important; }
.row > .pull-right { order: 999 !important; margin-left: auto !important; }
.row > .pull-left  { order: -1 !important; margin-right: auto !important; }

/* --- Button: btn-default → btn-secondary equivalent --- */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

/* --- Panel (BS3) → Card (BS5) basic compat --- */
.panel { border: 1px solid #dee2e6; border-radius: .375rem; margin-bottom: 1rem; }
.panel-body { padding: 1rem; }
.panel-heading { padding: .75rem 1rem; border-bottom: 1px solid #dee2e6; }
.panel-footer { padding: .75rem 1rem; border-top: 1px solid #dee2e6; }
.panel-default { border-color: #dee2e6; }

/* --- Label → Badge (basic) --- */
.label { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 700; border-radius: .375rem; }
.label-default { background-color: #6c757d; color: #fff; }
.label-primary { background-color: #0d6efd; color: #fff; }
.label-success { background-color: #198754; color: #fff; }
.label-danger  { background-color: #dc3545; color: #fff; }
.label-warning { background-color: #ffc107; color: #212529; }
.label-info    { background-color: #0dcaf0; color: #212529; }

/* --- Image utilities --- */
.img-responsive { display: block; max-width: 100%; height: auto; }
.logo-img-sz { max-width: 100%; height: auto; }

/* --- Form labels: BS3 had bold labels by default --- */
label { font-weight: 700; }
.control-label { font-weight: 700; }

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