/* === Bootstrap 5 Compatibility Layer for Bootstrap 4 === */

/* --- 1. Core color variables --- */
:root {
  --bs-primary: #007bff;
  --bs-success: #28a745;
  --bs-danger:  #dc3545;
  --bs-warning: #ffc107;
  --bs-info:    #17a2b8;
  --bs-muted:   #6c757d;
  --bs-white:   #fff;
  --bs-gray:    #6c757d;
  --bs-border-color: #dee2e6;
}

/* --- 2. Opacity utilities --- */
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }

/* --- 3. Font-size utilities (approximate) --- */
.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }

/* --- 4. Rounded utilities --- */
.rounded-0  { border-radius: 0 !important; }
.rounded-1  { border-radius: .2rem !important; }
.rounded-2  { border-radius: .25rem !important; }
.rounded-3  { border-radius: .3rem !important; }
.rounded-4  { border-radius: .6rem !important; }
.rounded-5  { border-radius: 1rem !important; }

/* --- 5. Border-width utilities --- */
.border-0 { border-width: 0 !important; }
.border-1 { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-3 { border-width: 3px !important; }
.border-4 { border-width: 4px !important; }
.border-5 { border-width: 5px !important; }

/* --- 6. Background & text color utilities (using vars) --- */
.bg-white { background-color: var(--bs-white) !important; }
.text-muted { color: var(--bs-muted) !important; }
.text-primary { color: var(--bs-primary) !important; }
.text-success { color: var(--bs-success) !important; }
.text-danger { color: var(--bs-danger) !important; }
.text-warning { color: var(--bs-warning) !important; }

/* --- 7. Border color fallback --- */
.border-muted { border-color: var(--bs-border-color) !important; }

/* --- 8. Logical border helpers (Bootstrap 4 lacks these) --- */
.border-start { border-left: 1px solid var(--bs-border-color) !important; }
.border-end   { border-right: 1px solid var(--bs-border-color) !important; }

/* --- 9. Row gap emulation for .row-cols-* (optional) --- */
.row-cols-1 > * { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .row-cols-md-2 > * { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
  .row-cols-lg-3 > * { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

/* --- 10. Bootstrap 5 card left-border helpers --- */
.border-left-primary { border-left: 4px solid var(--bs-primary) !important; }
.border-left-success { border-left: 4px solid var(--bs-success) !important; }
.border-left-danger  { border-left: 4px solid var(--bs-danger) !important; }