/**
 * Shims common Bootstrap 3 class names / patterns for Bootstrap 5 layouts.
 * Load after bootstrap.min.css (5.x).
 */

/* ---- Grid: col-xs-* (BS5 uses col-* for xs) ---- */
.row > .col-xs-1 { flex: 0 0 auto; width: 8.33333333%; max-width: 8.33333333%; }
.row > .col-xs-2 { flex: 0 0 auto; width: 16.66666667%; max-width: 16.66666667%; }
.row > .col-xs-3 { flex: 0 0 auto; width: 25%; max-width: 25%; }
.row > .col-xs-4 { flex: 0 0 auto; width: 33.33333333%; max-width: 33.33333333%; }
.row > .col-xs-5 { flex: 0 0 auto; width: 41.66666667%; max-width: 41.66666667%; }
.row > .col-xs-6 { flex: 0 0 auto; width: 50%; max-width: 50%; }
.row > .col-xs-7 { flex: 0 0 auto; width: 58.33333333%; max-width: 58.33333333%; }
.row > .col-xs-8 { flex: 0 0 auto; width: 66.66666667%; max-width: 66.66666667%; }
.row > .col-xs-9 { flex: 0 0 auto; width: 75%; max-width: 75%; }
.row > .col-xs-10 { flex: 0 0 auto; width: 83.33333333%; max-width: 83.33333333%; }
.row > .col-xs-11 { flex: 0 0 auto; width: 91.66666667%; max-width: 91.66666667%; }
.row > .col-xs-12 { flex: 0 0 auto; width: 100%; max-width: 100%; }

/* ---- Utilities ---- */
.img-responsive,
.thumbnail > img,
.thumbnail a > img {
  max-width: 100%;
  height: auto;
}
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767.98px) {
  .hidden-xs { display: none !important; }
}
@media (min-width: 768px) {
  .visible-xs { display: none !important; }
}
@media (max-width: 767.98px) {
  .visible-xs { display: block !important; }
  .visible-xs-inline { display: inline !important; }
  .visible-xs-inline-block { display: inline-block !important; }
}

/* ---- Navbar (BS3) ---- */
.navbar-default {
  background-color: #f8f8f8;
  border: 1px solid #e7e7e7;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav .nav-link { color: #777; }
.navbar-header { display: flex; align-items: center; flex-wrap: wrap; }
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #888;
  margin-top: 4px;
}
.navbar-toggle .icon-bar:first-child { margin-top: 0; }
.navbar-toggler .icon-bar { display: none; }

/* ---- Panels ---- */
.panel {
  margin-bottom: 1.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}
.panel-default { border-color: #ddd; }
.panel-heading {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  background-color: #f5f5f5;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.panel-body { padding: 1rem; }

/* ---- Buttons ---- */
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

/* ---- Forms ---- */
.form-horizontal .control-label {
  margin-bottom: 0;
  padding-top: calc(0.375rem + 1px);
}
@media (min-width: 768px) {
  .form-horizontal .control-label { text-align: right; }
}

/* ---- Modal close (BS3 markup) ---- */
.modal-header .close {
  float: right;
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.5;
}
.modal-header .close:hover { opacity: 0.75; }

/* Map BS3 .in to BS5 visibility where JS still toggles .in */
.modal.fade .modal-dialog { transition: transform 0.3s ease-out; }
.modal.in,
.modal.show { display: block !important; }
.modal-backdrop.in,
.modal-backdrop.show { opacity: 0.5; }

/* Collapse: BS3 used .in */
.collapse.in { display: block; }
.collapsing.in { display: block; }

/* Dropdown: BS3 .open on parent */
.dropdown.open > .dropdown-menu,
.nav-item.dropdown.open > .dropdown-menu { display: block; }

/* Carousel: BS3 control links */
.carousel-control.left,
.carousel-control.carousel-control-prev { justify-content: flex-start; }
.carousel-control.right,
.carousel-control.carousel-control-next { justify-content: flex-end; }
.carousel .carousel-control { display: flex; align-items: center; width: 15%; opacity: 0.5; }
.carousel .carousel-control:hover { opacity: 0.9; }

/* Tab panes with fade (BS3 used .in on tab-pane) */
.tab-pane.fade.in,
.tab-pane.fade.active { opacity: 1; }

/* BS3 .media object (removed in BS5) */
.media {
  display: flex;
  align-items: flex-start;
}
.media-left,
.media > .float-start,
.media > .pull-left {
  flex-shrink: 0;
  padding-right: 0.75rem;
}
.media-right {
  flex-shrink: 0;
  padding-left: 0.75rem;
}
.media-body {
  flex: 1 1 0;
  min-width: 0;
}

/* BS3 alert close button (not .btn-close) */
.alert .close {
  float: right;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  opacity: 0.5;
  background: transparent;
  border: 0;
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem -0.25rem auto;
  cursor: pointer;
}
.alert .close:hover {
  opacity: 0.75;
}

/* ---- BS3 form / layout helpers (no longer in BS5 core) ---- */
.form-group {
  margin-bottom: 1rem;
}
.help-block {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}
.well {
  min-height: 20px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  background-color: var(--bs-light);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.thumbnail {
  display: block;
  padding: 0.25rem;
  margin-bottom: 1rem;
  line-height: 1.5;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.btn-block {
  display: block;
  width: 100%;
}
.btn-block + .btn-block {
  margin-top: 0.5rem;
}

/* BS3 grid offsets (legacy names; BS3 sm/md breakpoints were 768px / 992px) */
@media (min-width: 768px) {
  .col-sm-offset-1 { margin-left: 8.33333333%; }
  .col-sm-offset-2 { margin-left: 16.66666667%; }
  .col-sm-offset-3 { margin-left: 25%; }
}
@media (min-width: 992px) {
  .col-md-offset-1 { margin-left: 8.33333333%; }
  .col-md-offset-2 { margin-left: 16.66666667%; }
  .col-md-offset-3 { margin-left: 25%; }
}