/**
 * Bootstrap 3 to Bootstrap 5 Compatibility Bridge
 * Wrap your legacy CMS content in a container with the class .legacy-bs3
 */

/* ==========================================================================
   1. Grid System & Responsiveness
   ========================================================================== */
.legacy-bs3 .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* Base setup for all column elements to prevent collapsing and handle padding */
.legacy-bs3 [class*="col-xs-"],
.legacy-bs3 [class*="col-sm-"],
.legacy-bs3 [class*="col-md-"],
.legacy-bs3 [class*="col-lg-"] {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 auto;
}

/* --- Extra Small Devices (col-xs-*) - Always Active --- */
.legacy-bs3 .col-xs-1  { width: 8.33333333%; }
.legacy-bs3 .col-xs-2  { width: 16.66666667%; }
.legacy-bs3 .col-xs-3  { width: 25%; }
.legacy-bs3 .col-xs-4  { width: 33.33333333%; }
.legacy-bs3 .col-xs-5  { width: 41.66666667%; }
.legacy-bs3 .col-xs-6  { width: 50%; }
.legacy-bs3 .col-xs-7  { width: 58.33333333%; }
.legacy-bs3 .col-xs-8  { width: 66.66666667%; }
.legacy-bs3 .col-xs-9  { width: 75%; }
.legacy-bs3 .col-xs-10 { width: 83.33333333%; }
.legacy-bs3 .col-xs-11 { width: 91.66666667%; }
.legacy-bs3 .col-xs-12 { width: 100%; }

/* --- Small Devices (Tablets, 768px and up) --- */
@media (min-width: 768px) {
  .legacy-bs3 .col-sm-1  { width: 8.33333333%; }
  .legacy-bs3 .col-sm-2  { width: 16.66666667%; }
  .legacy-bs3 .col-sm-3  { width: 25%; }
  .legacy-bs3 .col-sm-4  { width: 33.33333333%; }
  .legacy-bs3 .col-sm-5  { width: 41.66666667%; }
  .legacy-bs3 .col-sm-6  { width: 50%; }
  .legacy-bs3 .col-sm-7  { width: 58.33333333%; }
  .legacy-bs3 .col-sm-8  { width: 66.66666667%; }
  .legacy-bs3 .col-sm-9  { width: 75%; }
  .legacy-bs3 .col-sm-10 { width: 83.33333333%; }
  .legacy-bs3 .col-sm-11 { width: 91.66666667%; }
  .legacy-bs3 .col-sm-12 { width: 100%; }
}

/* --- Medium Devices (Desktops, 992px and up) --- */
@media (min-width: 992px) {
  .legacy-bs3 .col-md-1  { width: 8.33333333%; }
  .legacy-bs3 .col-md-2  { width: 16.66666667%; }
  .legacy-bs3 .col-md-3  { width: 25%; }
  .legacy-bs3 .col-md-4  { width: 33.33333333%; }
  .legacy-bs3 .col-md-5  { width: 41.66666667%; }
  .legacy-bs3 .col-md-6  { width: 50%; }
  .legacy-bs3 .col-md-7  { width: 58.33333333%; }
  .legacy-bs3 .col-md-8  { width: 66.66666667%; }
  .legacy-bs3 .col-md-9  { width: 75%; }
  .legacy-bs3 .col-md-10 { width: 83.33333333%; }
  .legacy-bs3 .col-md-11 { width: 91.66666667%; }
  .legacy-bs3 .col-md-12 { width: 100%; }
}

/* --- Large Devices (Large Desktops, 1200px and up) --- */
@media (min-width: 1200px) {
  .legacy-bs3 .col-lg-1  { width: 8.33333333%; }
  .legacy-bs3 .col-lg-2  { width: 16.66666667%; }
  .legacy-bs3 .col-lg-3  { width: 25%; }
  .legacy-bs3 .col-lg-4  { width: 33.33333333%; }
  .legacy-bs3 .col-lg-5  { width: 41.66666667%; }
  .legacy-bs3 .col-lg-6  { width: 50%; }
  .legacy-bs3 .col-lg-7  { width: 58.33333333%; }
  .legacy-bs3 .col-lg-8  { width: 66.66666667%; }
  .legacy-bs3 .col-lg-9  { width: 75%; }
  .legacy-bs3 .col-lg-10 { width: 83.33333333%; }
  .legacy-bs3 .col-lg-11 { width: 91.66666667%; }
  .legacy-bs3 .col-lg-12 { width: 100%; }
}

/* Clearfix utility fallback */
.legacy-bs3 .clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/* ==========================================================================
   2. Images & Typography
   ========================================================================== */
.legacy-bs3 .img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

.legacy-bs3 .center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.legacy-bs3 .text-left   { text-align: left !important; }
.legacy-bs3 .text-right  { text-align: right !important; }
.legacy-bs3 .text-center { text-align: center !important; }

.legacy-bs3 .bg-primary   { background-color: var(--bs-primary) !important; color: white; }
.legacy-bs3 .bg-success   { background-color: var(--bs-success) !important; color: white; }
.legacy-bs3 .bg-info      { background-color: var(--bs-info) !important; color: black; }
.legacy-bs3 .bg-warning   { background-color: var(--bs-warning) !important; color: black; }
.legacy-bs3 .bg-danger    { background-color: var(--bs-danger) !important; color: white; }

/* ==========================================================================
   3. Components: Panels (BS3) -> Cards (BS5)
   ========================================================================== */
.legacy-bs3 .panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--bs-body-bg, #fff);
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 0.375rem;
  margin-bottom: 20px;
}

.legacy-bs3 .panel-heading {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
}

.legacy-bs3 .panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
  color: inherit;
}

.legacy-bs3 .panel-body {
  flex: 1 1 auto;
  padding: 1rem;
}

.legacy-bs3 .panel-footer {
  padding: 0.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.175);
}

.legacy-bs3 .panel-default { border-color: rgba(0,0,0,0.15); }
.legacy-bs3 .panel-primary { border-color: var(--bs-primary); }
.legacy-bs3 .panel-primary > .panel-heading { background-color: var(--bs-primary); color: white; }
.legacy-bs3 .panel-success { border-color: var(--bs-success); }
.legacy-bs3 .panel-success > .panel-heading { background-color: var(--bs-success); color: white; }
.legacy-bs3 .panel-danger { border-color: var(--bs-danger); }
.legacy-bs3 .panel-danger > .panel-heading { background-color: var(--bs-danger); color: white; }

/* ==========================================================================
   4. Components: Wells & Thumbnails
   ========================================================================== */
.legacy-bs3 .well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color, #e9ecef);
  border-radius: 0.375rem;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}
.legacy-bs3 .well-lg { padding: 24px; border-radius: 0.5rem; }
.legacy-bs3 .well-sm { padding: 9px; border-radius: 0.25rem; }

.legacy-bs3 .thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
}

/* ==========================================================================
   5. Buttons & Labels
   ========================================================================== */
.legacy-bs3 .btn-xs {
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
}

.legacy-bs3 .label {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
  background-color: var(--bs-secondary);
}
.legacy-bs3 .label-default { background-color: var(--bs-secondary); }
.legacy-bs3 .label-primary { background-color: var(--bs-primary); }
.legacy-bs3 .label-success { background-color: var(--bs-success); }
.legacy-bs3 .label-info    { background-color: var(--bs-info); color: #000; }
.legacy-bs3 .label-warning { background-color: var(--bs-warning); color: #000; }
.legacy-bs3 .label-danger  { background-color: var(--bs-danger); }

/* ==========================================================================
   6. Pull Left / Pull Right Floats
   ========================================================================== */
.legacy-bs3 .pull-left  { float: left !important; }
.legacy-bs3 .pull-right { float: right !important; }