/*!
 * Bootstrap 5 JavaScript + Bootstrap 3 CSS bridge
 *
 * Load order:
 *   1. app/css/bootstrap.css   (Bootstrap 3.3.6 – Angle theme, unchanged visuals)
 *   2. this file               (state classes BS5 JS expects)
 *   3. app/css/eyemobile.css, app.css, …
 *
 * Bootstrap 5.3 JS toggles .show; Bootstrap 3 CSS expects .in / .open.
 * This file keeps both in sync so components look and behave like BS3.
 */

/* --- Modals --- */
.modal.show,
.modal.in {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
}

.modal.show .modal-dialog,
.modal.in .modal-dialog {
  transform: translate(0, 0);
}

.modal.fade.show .modal-dialog,
.modal.fade.in .modal-dialog {
  transform: translate(0, 0);
}

.modal-backdrop.show,
.modal-backdrop.fade.show,
.modal-backdrop.in {
  opacity: 0.5;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.fade.show,
.modal-backdrop.fade.in {
  opacity: 0.5;
}

/* --- Collapse --- */
.collapse.show:not(.collapsing),
.collapse.in:not(.collapsing) {
  display: block;
  height: auto !important;
  visibility: visible;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

/* --- Dropdowns (BS5 sets .show on menu; BS3 uses .open on parent) --- */
.dropdown-menu.show {
  display: block;
}

.dropdown.open > .dropdown-menu,
.btn-group.open > .dropdown-menu,
.dropup.open > .dropdown-menu,
.open > .dropdown-menu {
  display: block;
}

/* --- Fade --- */
.fade.show,
.fade.in {
  opacity: 1;
}

/* --- Tabs (BS5 Tab plugin adds .show to panes) --- */
.tab-content > .tab-pane.show,
.tab-content > .tab-pane.active.show,
.tab-content > .tab-pane.active.in {
  display: block;
}

.nav-tabs .nav-link.active,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}

.nav-pills .nav-link.active,
.nav-pills > li.active > a {
  color: #fff;
  background-color: #337ab7;
}

/* --- Carousel (BS5: .carousel-item; BS3: .item) --- */
.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item.active,
.item.active {
  display: block;
  z-index: 2;
}

.carousel-item-next,
.carousel-item-prev {
  position: absolute;
  top: 0;
}

.carousel-item-next.carousel-item-start,
.active.carousel-item-end {
  transform: translateX(100%);
}

.carousel-item-prev.carousel-item-end,
.active.carousel-item-start {
  transform: translateX(-100%);
}

/* --- Tooltips / popovers (BS5 arrow markup) --- */
.tooltip.show {
  opacity: 0.9;
}

.tooltip .tooltip-arrow {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.bs-tooltip-top .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

.tooltip.bs-tooltip-start .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
  right: 0;
  top: 50%;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}

.tooltip.bs-tooltip-end .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
  left: 0;
  top: 50%;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}

.popover.show {
  opacity: 1;
}

.popover .popover-arrow {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

/* --- Offcanvas (not in BS3; safe no-op if unused) --- */
.offcanvas.show {
  visibility: visible;
  transform: none;
}

/* --- Form validation (BS5 uses .is-invalid; BS3 uses .has-error) --- */
.is-invalid {
  border-color: #a94442 !important;
}

.is-valid {
  border-color: #27c24c !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #a94442;
}

.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #27c24c;
}

/* --- Close button (BS5 .btn-close used by some plugins; keep .close for BS3 markup) --- */
.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}

.btn-close:hover {
  opacity: 0.75;
}

/* --- Disable BS5-only reboot clashes when BS3 base is loaded (scoped resets) --- */
.modal .btn-close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
}