/*
 * Bootstrap 5 Compatibility Classes
 *
 * This file contains Bootstrap 5 utility classes for use with Bootstrap 3.4.1.
 * When we upgrade to Bootstrap 5, this file can be removed.
 *
 * The CI script scripts/ci/check_bootstrap5_classes.py uses this file as the
 * whitelist of allowed Bootstrap 5 classes. Any Bootstrap 5 class used in
 * the codebase must be defined here.
 */

/* =============================================================================
   Display utilities
   ============================================================================= */

.d-none {
    display: none !important;
}

.d-flex {
    display: flex !important;
}

/* =============================================================================
   Flex utilities
   ============================================================================= */

.flex-wrap {
    flex-wrap: wrap !important;
}

/* =============================================================================
   Spacing utilities (based on Bootstrap 5 default: 1rem = 16px, spacer = 0.25rem)
   - 1 = 0.25rem (4px)
   - 2 = 0.5rem (8px)
   - 3 = 1rem (16px)

   Bootstrap 5 uses directional naming for RTL support:
   - me-* = margin-end (replaces mr-*)
   - ms-* = margin-start (replaces ml-*)
   - pe-* = padding-end (replaces pr-*)
   - ps-* = padding-start (replaces pl-*)
   ============================================================================= */

/* Margin top */
.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

/* Margin end (right in LTR) */
.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

/* Margin bottom */
.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

/* Padding */
.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

/* Gap (for flexbox) */
.gap-2 {
    gap: 0.5rem !important;
}

/* =============================================================================
   Background utilities
   ============================================================================= */

.bg-light {
    background-color: #f8f9fa !important;
}

.bg-secondary {
    background-color: #6c757d !important;
}

.bg-transparent {
    background-color: transparent !important;
}

/* =============================================================================
   Text utilities
   ============================================================================= */

.text-dark {
    color: #343a40 !important;
}

/* =============================================================================
   Border utilities

   Bootstrap 5 uses directional naming for RTL support:
   - border-start (replaces border-left)
   - border-end (replaces border-right)
   ============================================================================= */

.border-top {
    border-top: 1px solid #dee2e6 !important;
}

.border-end {
    border-right: 1px solid #dee2e6 !important;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}

.border-start {
    border-left: 1px solid #dee2e6 !important;
}