/* Bootstrap 3 -> 5 compatibility shims.
   Goal: keep the existing template UI visually unchanged while the project uses Bootstrap 5. */

/* Match Bootstrap 3 container widths (768/992/1200 breakpoints). */
.container {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
}

.container,
.container-fluid {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

.row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 0;
}

@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* Legacy navbar helpers used by the template markup. */
.navbar-right,
.navbar-nav.navbar-right {
  margin-left: auto;
}

.navbar-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The template uses three "icon-bar" spans inside its custom toggle button. */
.icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
}

.icon-bar + .icon-bar {
  margin-top: 4px;
}

/* Bootstrap 3 collapse "in" class alias. */
.collapse.in {
  display: block;
}

/* Bootstrap 3 tab-pane active visibility */
.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active,
.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show {
  display: block;
}