/* Bootstrap 5 Migration Compatibility Layer */

/* Grid System Compatibility */
.container-fluid { max-width: none; }
.row { --bs-gutter-x: 30px; }

/* Float utilities migration - Bootstrap 5 */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.float-end { float: right !important; }
.float-start { float: left !important; }
.clearfix::after { content: ""; display: table; clear: both; }

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

/* Button compatibility */
.btn-default { 
  --bs-btn-color: #333;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ccc;
}

/* Form controls */
.form-control { 
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

/* Panel to Card migration */
.panel { 
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.panel-default { 
  border-color: #ddd;
}
.panel-heading { 
  background-color: #f5f5f5;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding: 10px 15px;
}
.panel-body { 
  padding: 15px;
}

/* Navbar compatibility */
.navbar-default { 
  --bs-navbar-color: #777;
  --bs-navbar-bg: #f8f8f8;
  --bs-navbar-border-color: #e7e7e7;
}

/* Responsive utilities compatibility */
@media (max-width: 575.98px) { 
  .hidden-xs { display: none !important; } 
  .visible-xs-block { display: block !important; }
  .visible-xs-inline { display: inline !important; }
  .visible-xs-inline-block { display: inline-block !important; }
}

@media (min-width: 576px) { 
  .visible-xs { display: none !important; } 
}