/**
 * Bootstrap 5 Backward Compatibility Styles
 * 
 * This file restores Bootstrap 4 styling patterns that were changed or removed in Bootstrap 5.
 * Required for smooth migration from Bootstrap 4.5.2 to Bootstrap 5.3.3
 */

/* ============================================
   FORM GROUP - Removed in Bootstrap 5
   Replace with "mb-3" but keep both for backward compatibility
   ============================================ */
.form-group {
  margin-bottom: 1rem;
}

.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;
}

/* ============================================
   CLOSE BUTTON - Changed from .close to .btn-close
   Keep .close working for backward compatibility
   ============================================ */
.close {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
  padding: 0;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  opacity: 0.75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  appearance: none;
}

/* Modal header - Bootstrap 5 uses flexbox, ensure proper layout */
.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

/* Modal header close button - push to right using margin-left auto */
.modal-header .close {
  padding: 0.5rem 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  order: 2; /* Ensure close button appears last (right side) */
}

/* Ensure modal title stays on the left */
.modal-header .modal-title {
  order: 1;
}

/* ============================================
   BUTTON BLOCK - Removed in Bootstrap 5
   Use "d-grid gap-2" wrapper in BS5, but keep .btn-block for compatibility
   ============================================ */
.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 0.5rem;
}

/* ============================================
   SPACING UTILITIES - Bootstrap 4 style (ml-, mr-, pl-, pr-)
   Bootstrap 5 uses ms-, me-, ps-, pe- for start/end
   ============================================ */
/* Margin Left */
.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; }

/* Margin Right */
.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; }

/* Padding Left */
.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; }

/* Padding Right */
.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; }

/* ============================================
   BADGE COLORS - Changed in Bootstrap 5
   badge-* changed to bg-* with text-bg-* utilities
   ============================================ */
.badge-primary { 
  color: #fff; 
  background-color: #0d6efd; 
}
.badge-secondary { 
  color: #fff; 
  background-color: #6c757d; 
}
.badge-success { 
  color: #fff; 
  background-color: #198754; 
}
.badge-danger { 
  color: #fff; 
  background-color: #dc3545; 
}
.badge-warning { 
  color: #212529; 
  background-color: #ffc107; 
}
.badge-info { 
  color: #fff; 
  background-color: #0dcaf0; 
}
.badge-light { 
  color: #212529; 
  background-color: #f8f9fa; 
}
.badge-dark { 
  color: #fff; 
  background-color: #212529; 
}

/* ============================================
   CUSTOM FORM CONTROLS - Removed in Bootstrap 5
   Bootstrap 5 uses standard form classes
   ============================================ */
.custom-control {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  appearance: none;
}

/* ============================================
   TEXT UTILITIES - Some renamed in Bootstrap 5
   ============================================ */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Bootstrap 5 uses text-start and text-end */
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }

/* ============================================
   FLOAT UTILITIES - Some renamed in Bootstrap 5
   ============================================ */
.float-left { float: left !important; }
.float-right { float: right !important; }

/* Bootstrap 5 uses float-start and float-end */
.float-start { float: left !important; }
.float-end { float: right !important; }

/* ============================================
   INPUT GROUP - Minor changes in Bootstrap 5
   ============================================ */
.input-group-append,
.input-group-prepend {
  display: flex;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

/* ============================================
   MEDIA OBJECT - Removed in Bootstrap 5
   Use flex utilities instead, but keep for compatibility
   ============================================ */
.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}

/* ============================================
   JUMBOTRON - Removed in Bootstrap 5
   ============================================ */
.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

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

.jumbotron-fluid {
  padding-right: 0;
  padding-left: 0;
  border-radius: 0;
}

/* ============================================
   CARD DECK - Removed in Bootstrap 5
   Use CSS Grid or row/col instead
   ============================================ */
.card-deck {
  display: flex;
  flex-flow: row wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.card-deck .card {
  flex: 1 0 0%;
  margin-right: 15px;
  margin-bottom: 0;
  margin-left: 15px;
}

/* ============================================
   NO GUTTERS - Renamed in Bootstrap 5
   Bootstrap 5 uses g-0 for no gutters
   ============================================ */
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* ============================================
   SR-ONLY - Renamed to visually-hidden in BS5
   ============================================ */
.sr-only,
.sr-only-focusable:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================
   FONT-WEIGHT UTILITIES - Some renamed
   ============================================ */
.font-weight-bold { font-weight: 700 !important; }
.font-weight-bolder { font-weight: bolder !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-light { font-weight: 300 !important; }
.font-weight-lighter { font-weight: lighter !important; }