/**
 * Bootstrap 5 Compatibility Layer
 * Fixes visual regressions from Bootstrap 4 to Bootstrap 5 migration
 */

/* ==========================================================================
   1. LINK UNDERLINES
   Bootstrap 5 adds text-decoration: underline by default to links.
   Restore Bootstrap 4 behavior (no underline by default, underline on hover)
   ========================================================================== */

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Keep underline removed for specific components */
.nav-link,
.navbar-brand,
.btn,
.dropdown-item,
.list-group-item,
.page-link,
.card-link,
.breadcrumb-item a,
.carousel-control-prev,
.carousel-control-next,
.dualswitch-item,
.radio-list-group__elem,
.profile-selector a,
.menu-header a,
.footer a,
.header a {
  text-decoration: none !important;
}

.nav-link:hover,
.navbar-brand:hover,
.dropdown-item:hover,
.list-group-item:hover,
.card-link:hover,
.breadcrumb-item a:hover,
.dualswitch-item:hover,
.radio-list-group__elem:hover,
.profile-selector a:hover,
.menu-header a:hover,
.footer a:hover,
.header a:hover {
  text-decoration: none !important;
}

/* ==========================================================================
   2. NAVBAR FIXES
   Bootstrap 5 changed navbar structure and spacing
   ========================================================================== */

/* Restore navbar positioning */
.navbar {
  position: relative;
}

.navbar-nav {
  flex-direction: row;
}

.navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

/* Fix navbar collapse behavior */
.navbar-collapse {
  flex-basis: auto;
}

/* ==========================================================================
   3. FORM CONTROLS
   Bootstrap 5 changed form styling
   ========================================================================== */

/* Restore form-group margin */
.form-group {
  margin-bottom: 1rem;
}

/* Restore form-row (replaced by row g-3 in BS5) */
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

/* Restore form-inline */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

/* ==========================================================================
   4. BUTTON FIXES
   ========================================================================== */

/* Restore btn-block behavior */
.btn-block {
  display: block;
  width: 100%;
}

/* ==========================================================================
   5. SPACING & MARGIN UTILITIES (Left/Right to Start/End)
   Bootstrap 5 renamed ml/mr/pl/pr to ms/me/ps/pe
   Adding backwards compatibility
   ========================================================================== */

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.ml-auto { margin-left: auto !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
.mr-auto { margin-right: auto !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* ==========================================================================
   6. TEXT ALIGNMENT (Left/Right to Start/End)
   ========================================================================== */

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* ==========================================================================
   7. FLOAT UTILITIES
   ========================================================================== */

.float-left { float: left !important; }
.float-right { float: right !important; }

/* ==========================================================================
   8. BORDER RADIUS
   ========================================================================== */

.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

/* ==========================================================================
   9. DROPDOWN MENU ALIGNMENT
   ========================================================================== */

.dropdown-menu-left { --bs-position: start; }
.dropdown-menu-right { --bs-position: end; }

/* ==========================================================================
   10. FOOTER "SUIVEZ-NOUS" FIX
   Bootstrap 5 .row applies flex: 0 0 auto and width: 100% to direct children
   This breaks the footer layout where left/right should share space
   ========================================================================== */

.footer__top-sub-container {
  flex-wrap: nowrap !important;
}

.footer__top-sub-container > .footer__top-left,
.footer__top-sub-container > .footer__top-right {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

.footer__top-left {
  flex-shrink: 1 !important;
}

.footer__top-right {
  flex-shrink: 0 !important;
  white-space: nowrap;
}

/* ==========================================================================
   11. CAROUSEL FIXES
   ========================================================================== */

/* Ensure carousel controls are visible */
.carousel-control-prev,
.carousel-control-next {
  opacity: 0.5;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 0.9;
}

/* ==========================================================================
   11. BADGE VARIANTS (removed in BS5)
   ========================================================================== */

.badge-primary { background-color: var(--bs-primary, #0d6efd); color: #fff; }
.badge-secondary { background-color: var(--bs-secondary, #6c757d); color: #fff; }
.badge-success { background-color: var(--bs-success, #198754); color: #fff; }
.badge-danger { background-color: var(--bs-danger, #dc3545); color: #fff; }
.badge-warning { background-color: var(--bs-warning, #ffc107); color: #212529; }
.badge-info { background-color: var(--bs-info, #0dcaf0); color: #212529; }
.badge-light { background-color: var(--bs-light, #f8f9fa); color: #212529; }
.badge-dark { background-color: var(--bs-dark, #212529); color: #fff; }

/* ==========================================================================
   12. CLOSE BUTTON
   Bootstrap 5 changed .close to .btn-close
   ========================================================================== */

.close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 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.375rem;
  opacity: 0.5;
}

.close:hover {
  opacity: 0.75;
}

/* ==========================================================================
   13. CUSTOM FORM CONTROLS (removed in BS5)
   ========================================================================== */

.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

.custom-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  appearance: none;
}

/* ==========================================================================
   14. JUMBOTRON (removed in BS5)
   ========================================================================== */

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

/* ==========================================================================
   15. MEDIA OBJECT (removed in BS5)
   ========================================================================== */

.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}

/* ==========================================================================
   16. CUSTOM SELECT DROPDOWN FIX
   Bootstrap 5's .form-select { display: block } overrides the theme's
   custom select styling (select { display: none }). This fix ensures
   native select elements are hidden inside custom .select containers.
   ========================================================================== */

.select select,
.select select.form-select {
  display: none;
}

/* ==========================================================================
   17. DOCUMENTATION SEARCH FILTERS ALIGNMENT
   Bootstrap 5 removed default margins from form elements, causing misalignment
   between filter dropdowns and the search button.
   ========================================================================== */

.docsearch-row-filters .docsearch-label {
  margin-bottom: 0.5rem;
}

.docsearch-row-filters .form-item {
  margin-top: 1rem;
}