/**
 * Bootstrap 3 → Bootstrap 5 Compatibility Shim
 * Maps removed/renamed Bootstrap 3 classes to Bootstrap 5 equivalents.
 * Load this AFTER bootstrap.min.css.
 */

/* ================================================================
   PANEL COMPONENT (removed in Bootstrap 5)
   ================================================================ */

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}
.panel-body::before,
.panel-body::after {
  content: " ";
  display: table;
}
.panel-body::after {
  clear: both;
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a {
  color: inherit;
}
.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel-default                { border-color: #ddd; }
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body { border-top-color: #ddd; }
.panel-default > .panel-footer + .panel-collapse > .panel-body  { border-bottom-color: #ddd; }
.panel-primary                { border-color: #337ab7; }
.panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; }
.panel-success                { border-color: #d6e9c6; }
.panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.panel-info                   { border-color: #bce8f1; }
.panel-info > .panel-heading  { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.panel-warning                { border-color: #faebcc; }
.panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.panel-danger                 { border-color: #ebccd1; }
.panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

.panel-group { margin-bottom: 20px; }
.panel-group .panel { margin-bottom: 0; border-radius: 4px; overflow: hidden; }
.panel-group .panel + .panel { margin-top: 5px; }
.panel-group .panel-heading { border-bottom: 0; }
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group { border-top: 1px solid #ddd; }
.panel-group .panel-footer { border-top: 0; }
.panel-group .panel-footer + .panel-collapse > .panel-body { border-bottom: 1px solid #ddd; }

/* ================================================================
   BUTTON - btn-default (removed in Bootstrap 5)
   ================================================================ */

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default.disabled,
.btn-default[disabled] {
  background-color: #fff;
  border-color: #ccc;
}

/* ================================================================
   IMAGES - img-responsive (renamed to img-fluid in Bootstrap 5)
   ================================================================ */

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ================================================================
   SCREEN READER - sr-only (renamed to visually-hidden in Bootstrap 5)
   ================================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   NAVBAR (Bootstrap 3 classes removed/renamed in Bootstrap 5)
   ================================================================ */

.navbar-fixed-top {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  top: 0;
}
.navbar-header {
  float: left;
}
.navbar-header::before,
.navbar-header::after {
  content: " ";
  display: table;
}
.navbar-header::after {
  clear: both;
}
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-default .navbar-brand { color: #777; }
.navbar-default .navbar-nav > li > a { color: #777; }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-right {
  float: right !important;
  margin-right: -15px;
}

/* navbar-toggle (renamed to navbar-toggler) */
.navbar-toggle {
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
  background-color: #ddd;
  outline: 0;
}

/* icon-bar (hamburger lines, removed in Bootstrap 5) */
.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #888;
  margin: 4px 0;
}

/* ================================================================
   POPOVER - popover-content (renamed to popover-body in Bootstrap 5)
   ================================================================ */

.popover-content {
  padding: 9px 14px;
}

/* ================================================================
   GRID - col-xs-* (removed in Bootstrap 5; xs is now just col-*)
   ================================================================ */

/* Shared structural properties — always needed regardless of viewport */
.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 {
  padding-right: calc(var(--bs-gutter-x, 30px) * .5);
  padding-left:  calc(var(--bs-gutter-x, 30px) * .5);
  flex-shrink: 0;
}

/*
 * Width rules ONLY at Bootstrap 3's xs range (< 768px).
 * Wrapping in max-width prevents these from overriding col-sm-* / col-md-* /
 * col-lg-* from Bootstrap 5 at larger viewports (the original bug).
 */
@media (max-width: 767.98px) {
  .col-xs-1  { flex: 0 0 auto; width: 8.33333%; }
  .col-xs-2  { flex: 0 0 auto; width: 16.66667%; }
  .col-xs-3  { flex: 0 0 auto; width: 25%; }
  .col-xs-4  { flex: 0 0 auto; width: 33.33333%; }
  .col-xs-5  { flex: 0 0 auto; width: 41.66667%; }
  .col-xs-6  { flex: 0 0 auto; width: 50%; }
  .col-xs-7  { flex: 0 0 auto; width: 58.33333%; }
  .col-xs-8  { flex: 0 0 auto; width: 66.66667%; }
  .col-xs-9  { flex: 0 0 auto; width: 75%; }
  .col-xs-10 { flex: 0 0 auto; width: 83.33333%; }
  .col-xs-11 { flex: 0 0 auto; width: 91.66667%; }
  .col-xs-12 { flex: 0 0 auto; width: 100%; }

  /* col-xs-offset-* */
  .col-xs-offset-0  { margin-left: 0; }
  .col-xs-offset-1  { margin-left: 8.33333%; }
  .col-xs-offset-2  { margin-left: 16.66667%; }
  .col-xs-offset-3  { margin-left: 25%; }
  .col-xs-offset-4  { margin-left: 33.33333%; }
  .col-xs-offset-5  { margin-left: 41.66667%; }
  .col-xs-offset-6  { margin-left: 50%; }
  .col-xs-offset-7  { margin-left: 58.33333%; }
  .col-xs-offset-8  { margin-left: 66.66667%; }
  .col-xs-offset-9  { margin-left: 75%; }
  .col-xs-offset-10 { margin-left: 83.33333%; }
  .col-xs-offset-11 { margin-left: 91.66667%; }
}

/* ================================================================
   GRID - col-*-offset-* (renamed to offset-*-* in Bootstrap 5)
   Using Bootstrap 3 breakpoints to preserve original stacking.
   ================================================================ */

@media (min-width: 768px) {
  .col-sm-offset-0  { margin-left: 0; }
  .col-sm-offset-1  { margin-left: 8.33333%; }
  .col-sm-offset-2  { margin-left: 16.66667%; }
  .col-sm-offset-3  { margin-left: 25%; }
  .col-sm-offset-4  { margin-left: 33.33333%; }
  .col-sm-offset-5  { margin-left: 41.66667%; }
  .col-sm-offset-6  { margin-left: 50%; }
  .col-sm-offset-7  { margin-left: 58.33333%; }
  .col-sm-offset-8  { margin-left: 66.66667%; }
  .col-sm-offset-9  { margin-left: 75%; }
  .col-sm-offset-10 { margin-left: 83.33333%; }
  .col-sm-offset-11 { margin-left: 91.66667%; }
}
@media (min-width: 992px) {
  .col-md-offset-0  { margin-left: 0; }
  .col-md-offset-1  { margin-left: 8.33333%; }
  .col-md-offset-2  { margin-left: 16.66667%; }
  .col-md-offset-3  { margin-left: 25%; }
  .col-md-offset-4  { margin-left: 33.33333%; }
  .col-md-offset-5  { margin-left: 41.66667%; }
  .col-md-offset-6  { margin-left: 50%; }
  .col-md-offset-7  { margin-left: 58.33333%; }
  .col-md-offset-8  { margin-left: 66.66667%; }
  .col-md-offset-9  { margin-left: 75%; }
  .col-md-offset-10 { margin-left: 83.33333%; }
  .col-md-offset-11 { margin-left: 91.66667%; }
}
@media (min-width: 1200px) {
  .col-lg-offset-0  { margin-left: 0; }
  .col-lg-offset-1  { margin-left: 8.33333%; }
  .col-lg-offset-2  { margin-left: 16.66667%; }
  .col-lg-offset-3  { margin-left: 25%; }
  .col-lg-offset-4  { margin-left: 33.33333%; }
  .col-lg-offset-5  { margin-left: 41.66667%; }
  .col-lg-offset-6  { margin-left: 50%; }
  .col-lg-offset-7  { margin-left: 58.33333%; }
  .col-lg-offset-8  { margin-left: 66.66667%; }
  .col-lg-offset-9  { margin-left: 75%; }
  .col-lg-offset-10 { margin-left: 83.33333%; }
  .col-lg-offset-11 { margin-left: 91.66667%; }
}

/* ================================================================
   GRID - col-*-push/pull (removed in Bootstrap 5)
   Bootstrap 3 used position:relative + left/right on floated elements.
   Bootstrap 5 uses flexbox — the correct equivalent is CSS `order`.
   push-N (N>0) → send to end (order: 13)
   pull-N (N>0) → send to start (order: 0, default)
   push-0 / pull-0 → reset order
   ================================================================ */

/* xs: no media query — always applied */
.col-xs-push-0 { order: 0; }
.col-xs-push-1, .col-xs-push-2, .col-xs-push-3, .col-xs-push-4,
.col-xs-push-5, .col-xs-push-6, .col-xs-push-7, .col-xs-push-8,
.col-xs-push-9, .col-xs-push-10, .col-xs-push-11, .col-xs-push-12 { order: 13; }

.col-xs-pull-0 { order: 0; }
.col-xs-pull-1, .col-xs-pull-2, .col-xs-pull-3, .col-xs-pull-4,
.col-xs-pull-5, .col-xs-pull-6, .col-xs-pull-7, .col-xs-pull-8,
.col-xs-pull-9, .col-xs-pull-10, .col-xs-pull-11, .col-xs-pull-12 { order: 0; }

/* sm: Bootstrap 3 breakpoint (768px) */
@media (min-width: 768px) {
  .col-sm-push-0 { order: 0; }
  .col-sm-push-1, .col-sm-push-2, .col-sm-push-3, .col-sm-push-4,
  .col-sm-push-5, .col-sm-push-6, .col-sm-push-7, .col-sm-push-8,
  .col-sm-push-9, .col-sm-push-10, .col-sm-push-11, .col-sm-push-12 { order: 13; }

  .col-sm-pull-0 { order: 0; }
  .col-sm-pull-1, .col-sm-pull-2, .col-sm-pull-3, .col-sm-pull-4,
  .col-sm-pull-5, .col-sm-pull-6, .col-sm-pull-7, .col-sm-pull-8,
  .col-sm-pull-9, .col-sm-pull-10, .col-sm-pull-11, .col-sm-pull-12 { order: 0; }
}

/* md: Bootstrap 3 breakpoint (992px) */
@media (min-width: 992px) {
  .col-md-push-0 { order: 0; }
  .col-md-push-1, .col-md-push-2, .col-md-push-3, .col-md-push-4,
  .col-md-push-5, .col-md-push-6, .col-md-push-7, .col-md-push-8,
  .col-md-push-9, .col-md-push-10, .col-md-push-11, .col-md-push-12 { order: 13; }

  .col-md-pull-0 { order: 0; }
  .col-md-pull-1, .col-md-pull-2, .col-md-pull-3, .col-md-pull-4,
  .col-md-pull-5, .col-md-pull-6, .col-md-pull-7, .col-md-pull-8,
  .col-md-pull-9, .col-md-pull-10, .col-md-pull-11, .col-md-pull-12 { order: 0; }
}

/* lg: Bootstrap 3 breakpoint (1200px) */
@media (min-width: 1200px) {
  .col-lg-push-0 { order: 0; }
  .col-lg-push-1, .col-lg-push-2, .col-lg-push-3, .col-lg-push-4,
  .col-lg-push-5, .col-lg-push-6, .col-lg-push-7, .col-lg-push-8,
  .col-lg-push-9, .col-lg-push-10, .col-lg-push-11, .col-lg-push-12 { order: 13; }

  .col-lg-pull-0 { order: 0; }
  .col-lg-pull-1, .col-lg-pull-2, .col-lg-pull-3, .col-lg-pull-4,
  .col-lg-pull-5, .col-lg-pull-6, .col-lg-pull-7, .col-lg-pull-8,
  .col-lg-pull-9, .col-lg-pull-10, .col-lg-pull-11, .col-lg-pull-12 { order: 0; }
}

/* ================================================================
   VISIBILITY UTILITIES (removed in Bootstrap 5)
   Using Bootstrap 3 breakpoints: xs<768, sm 768-991, md 992-1199, lg≥1200
   ================================================================ */

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

/* visible-* (hidden by default, revealed at breakpoint) */
.visible-xs, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md, .visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block {
  display: none !important;
}
@media (max-width: 767px) {
  .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) {
  .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) {
  .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) {
  .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; }
}