/*
 * Bootstrap 3 compatibility helpers for legacy markup on Bootstrap 5.
 * Breakpoints match Bootstrap 3 (xs <768, sm ≥768, md ≥992, lg ≥1200).
 */

/* Visibility (BS3 semantics) */
@media (max-width: 767px) {
  .hidden-xs { display: none !important; }
  .visible-xs { display: block !important; }
  .visible-xs-block { display: block !important; }
  .visible-xs-inline { display: inline !important; }
  .visible-xs-inline-block { display: inline-block !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm { display: none !important; }
  .visible-sm { display: block !important; }
  .visible-sm-block { display: block !important; }
  .visible-sm-inline { display: inline !important; }
  .visible-sm-inline-block { display: inline-block !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md { display: none !important; }
  .visible-md { display: block !important; }
  .visible-md-block { display: block !important; }
  .visible-md-inline { display: inline !important; }
  .visible-md-inline-block { display: inline-block !important; }
}
@media (min-width: 1200px) {
  .hidden-lg { display: none !important; }
  .visible-lg { display: block !important; }
  .visible-lg-block { display: block !important; }
  .visible-lg-inline { display: inline !important; }
  .visible-lg-inline-block { display: inline-block !important; }
}
@media (min-width: 1200px) {
  .hidden-xl { display: none !important; }
}

@media (min-width: 768px) {
  .visible-xs,
  .visible-xs-block,
  .visible-xs-inline,
  .visible-xs-inline-block { display: none !important; }
}
@media (max-width: 767px), (min-width: 992px) {
  .visible-sm,
  .visible-sm-block,
  .visible-sm-inline,
  .visible-sm-inline-block { display: none !important; }
}
@media (max-width: 991px), (min-width: 1200px) {
  .visible-md,
  .visible-md-block,
  .visible-md-inline,
  .visible-md-inline-block { display: none !important; }
}
@media (max-width: 1199px) {
  .visible-lg,
  .visible-lg-block,
  .visible-lg-inline,
  .visible-lg-inline-block { display: none !important; }
}

/* Grid (col-xs-* → BS5 col-*) */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  position: relative;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
@media (max-width: 767px) {
  .col-xs-1 { width: 8.33333333%; }
  .col-xs-2 { width: 16.66666667%; }
  .col-xs-3 { width: 25%; }
  .col-xs-4 { width: 33.33333333%; }
  .col-xs-5 { width: 41.66666667%; }
  .col-xs-6 { width: 50%; }
  .col-xs-7 { width: 58.33333333%; }
  .col-xs-8 { width: 66.66666667%; }
  .col-xs-9 { width: 75%; }
  .col-xs-10 { width: 83.33333333%; }
  .col-xs-11 { width: 91.66666667%; }
  .col-xs-12 { width: 100%; }
}

/* Utilities renamed in BS5 */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.img-circle { border-radius: 50% !important; }
.img-responsive { max-width: 100%; height: auto; display: block; }
.btn-default {
  --bs-btn-color: #333;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ccc;
  --bs-btn-hover-color: #333;
  --bs-btn-hover-bg: #e6e6e6;
  --bs-btn-hover-border-color: #adadad;
  --bs-btn-active-color: #333;
  --bs-btn-active-bg: #d4d4d4;
  --bs-btn-active-border-color: #8c8c8c;
}
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/* Forms */
.form-horizontal .form-group {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  align-items: center;
}
.form-horizontal .control-label {
  padding-top: calc(.375rem + var(--bs-border-width));
  margin-bottom: 0;
}
.control-label { font-weight: 500; }
.form-group { margin-bottom: 1rem; }
.input-group-addon {
  display: flex;
  align-items: center;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.input-group .input-group-addon:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.input-group .input-group-addon:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

/* Panels → cards */
.panel {
  margin-bottom: 1.25rem;
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.panel-heading {
  padding: .625rem 1rem;
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
  border-top-left-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  border-top-right-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  background-color: var(--bs-tertiary-bg);
}
.panel-body { padding: 1rem; }
.panel-footer {
  padding: .625rem 1rem;
  background-color: var(--bs-tertiary-bg);
  border-top: var(--bs-border-width) solid var(--bs-border-color);
}
.panel-default { border-color: var(--bs-border-color); }
.panel-primary { border-color: var(--bs-primary); }
.panel-primary > .panel-heading {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Wells */
.well {
  min-height: 1.25rem;
  padding: 1rem;
  margin-bottom: 1.25rem;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.well-sm { padding: .5625rem; border-radius: var(--bs-border-radius-sm); }
.well-lg { padding: 1.5rem; border-radius: var(--bs-border-radius-lg); }

/* Labels → badges */
.label {
  display: inline-block;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}
.label-default { background-color: var(--bs-secondary); }
.label-primary { background-color: var(--bs-primary); }
.label-success { background-color: var(--bs-success); }
.label-info { background-color: var(--bs-info); }
.label-warning { background-color: var(--bs-warning); }
.label-danger { background-color: var(--bs-danger); }