/*
 * Bootstrap 4 Compatibility Shim
 * -----------------------------------------------------------
 * Bootstrap 5 removed several classes and default element
 * styles that this application relies on. This file restores
 * them so the UI remains pixel-perfect after the upgrade.
 * -----------------------------------------------------------
 */

/* ----------------------------------------------------------
 * 1. label margin-bottom
 *    BS4 set this on every <label> by default.
 *    BS5 only applies it via .form-label.
 * ---------------------------------------------------------- */
label {
    margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------
 * 2. .form-group
 *    BS4: margin-bottom 1rem. Removed entirely in BS5.
 * ---------------------------------------------------------- */
.form-group {
    margin-bottom: 1rem;
}

/* ----------------------------------------------------------
 * 3. .close button
 *    BS4 styled the modal/alert close button.
 *    BS5 replaced it with .btn-close (a background-image X).
 *    This project still uses class="close" with &times;
 *    inside, so we restore the BS4 appearance.
 * ---------------------------------------------------------- */
button.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    background-color: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.close:not(:disabled):not(.disabled):hover,
button.close:not(:disabled):not(.disabled):focus {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}

/* ----------------------------------------------------------
 * 4. .sr-only  (screen-reader only)
 *    BS4 utility. Replaced by .visually-hidden in BS5.
 *    Still used in modal close button spans.
 * ---------------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------
 * 5. Text-alignment helpers
 *    .text-left / .text-right removed in BS5
 *    (renamed to .text-start / .text-end)
 * ---------------------------------------------------------- */
.text-left  { text-align: left  !important; }
.text-right { text-align: right !important; }

/* ----------------------------------------------------------
 * 6. Float helpers
 *    .float-left / .float-right removed in BS5
 *    (renamed to .float-start / .float-end)
 * ---------------------------------------------------------- */
.float-left  { float: left  !important; }
.float-right { float: right !important; }

/* ----------------------------------------------------------
 * 7. Margin-left utilities  (ml-* → ms-* in BS5)
 *    BS4 spacing scale: 0=0, 1=0.25rem, 2=0.5rem,
 *    3=1rem, 4=1.5rem, 5=3rem
 *    NOTE: project's custom ml-6 … ml-101 (pixel-based)
 *    are already in margins.css and are unaffected.
 * ---------------------------------------------------------- */
.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; }

/* ----------------------------------------------------------
 * 8. Margin-right utilities  (mr-* → me-* in BS5)
 * ---------------------------------------------------------- */
.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; }

/* ----------------------------------------------------------
 * 9. Padding-left utilities  (pl-* → ps-* in BS5)
 * ---------------------------------------------------------- */
.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; }

/* ----------------------------------------------------------
 * 10. Padding-right utilities  (pr-* → pe-* in BS5)
 * ---------------------------------------------------------- */
.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; }

/* ----------------------------------------------------------
 * 11. .form-text  (spacing under inputs)
 *    BS4 added margin-top: 0.25rem. Still works in BS5
 *    but kept here for explicit coverage.
 * ---------------------------------------------------------- */
.form-text {
    display: block;
    margin-top: 0.25rem;
}

/* ----------------------------------------------------------
 * 12. Grid gutter — column padding & row negative margins
 *
 *    BS4: all .col-* had padding-right/left: 15px (fixed px)
 *         .row had margin-right/left: -15px
 *    BS5: switched to CSS-variable gutters → ~12px per side
 *
 *    We restore BS4 behaviour in two ways:
 *    (a) Set --bs-gutter-x: 30px on .row so BS5's own calc()
 *        expressions on the row's negative margins resolve
 *        to -15px correctly.
 *    (b) Explicitly declare padding-right/left: 15px on every
 *        column selector — this is the same list BS4 shipped
 *        and guarantees the value regardless of variable
 *        inheritance. Also adds col-xxl-* which this project
 *        uses but BS4 did not have.
 * ---------------------------------------------------------- */
.row {
    --bs-gutter-x: 30px;
    margin-right: -15px;
    margin-left:  -15px;
}

.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-auto,
.col-sm,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-sm-auto,
.col-md,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-md-auto,
.col-lg,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-lg-auto,
.col-xl,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
.col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12,
.col-xl-auto,
.col-xxl,
.col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6,
.col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12,
.col-xxl-auto {
    /* Only restore the padding that changed BS4→BS5 (15px vs 12px).
       DO NOT set width or position here — BS5 sets those correctly,
       and overriding width:100% would break col-3/col-6/etc. sizing. */
    padding-right: 15px !important;
    padding-left:  15px !important;
}

/* ----------------------------------------------------------
 * 13. Container side padding
 *    BS4: .container, .container-fluid → padding-right/left: 15px
 *    BS5: uses calc(var(--bs-gutter-x, .75rem) * .5) = 12px
 *    Direct override restores the BS4 value.
 * ---------------------------------------------------------- */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    padding-right: 15px;
    padding-left: 15px;
}

/* ----------------------------------------------------------
 * 14. <select class="form-control"> — dropdown arrow fix
 *
 *    BS5 added `appearance: none` to .form-control, which
 *    strips the browser's native dropdown arrow from <select>
 *    elements. BS4 did NOT do this — selects kept the arrow.
 *
 *    This project uses <select class="form-control"> in 11+
 *    files. Restoring `appearance: auto` brings the arrow back
 *    while keeping all other form-control styles intact.
 * ---------------------------------------------------------- */
select.form-control {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* ----------------------------------------------------------
 * 15. .card body & header padding
 *    BS4: .card-body        → padding: 1.25rem
 *         .card-header      → padding: .75rem 1.25rem
 *         .card-footer      → padding: .75rem 1.25rem
 *    BS5: reduced to 1rem / .5rem 1rem (via CSS variables)
 * ---------------------------------------------------------- */
.card-body {
    padding: 1.25rem;
}
.card-header,
.card-footer {
    padding: 0.75rem 1.25rem;
}

/* ----------------------------------------------------------
 * 16. .dropdown-item padding
 *    BS4: padding: .25rem 1.5rem
 *    BS5: padding: .25rem 1rem  (less horizontal padding)
 *    The top-header dropdown uses this.
 * ---------------------------------------------------------- */
.dropdown-item {
    padding: 0.25rem 1.5rem;
}

/* ----------------------------------------------------------
 * 17. .form-control border-radius & border-color
 *    BS4: border-radius: .25rem  |  border-color: #ced4da
 *    BS5: border-radius: .375rem |  border-color: #dee2e6
 *         (controlled via CSS variables)
 *    Restoring BS4 values keeps input appearance unchanged.
 * ---------------------------------------------------------- */
.form-control {
    border-radius: 0.25rem;
    border-color: #ced4da;
}
.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* ----------------------------------------------------------
 * 18. .modal-content border-radius
 *    BS4: border-radius: .3rem
 *    BS5: border-radius: var(--bs-modal-border-radius) = .5rem
 * ---------------------------------------------------------- */
.modal-content {
    border-radius: 0.3rem;
}

/* ----------------------------------------------------------
 * 19. .modal-header / .modal-footer padding
 *    BS4: padding: 1rem  (all sides)
 *    BS5: 1rem 1rem (header), 0.75rem 1rem (footer)
 *         — minor but visible change with the close button
 * ---------------------------------------------------------- */
.modal-header {
    padding: 1rem;
}
.modal-footer {
    padding: 0.75rem;
}

/* ----------------------------------------------------------
 * 20. .btn border-radius
 *    BS4: .btn → border-radius: .25rem
 *    BS5: .btn → border-radius: var(--bs-btn-border-radius) = .375rem
 * ---------------------------------------------------------- */
.btn {
    border-radius: 0.25rem;
}

/* ----------------------------------------------------------
 * 21. .badge
 *    BS4: .badge was inline, vertical-align: baseline
 *    BS5: .badge is inline-flex, vertical-align: baseline
 *    No class-name changes needed (badge-* not used here),
 *    but font-size changed: BS4=75%, BS5=0.75em — same value,
 *    no fix needed.
 * ---------------------------------------------------------- */

/* ----------------------------------------------------------
 * 22. .alert padding
 *    BS4: padding: .75rem 1.25rem
 *    BS5: padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x)
 *         defaults = 1rem 1rem  (slightly more)
 *    Restore BS4 padding so alert boxes look the same.
 * ---------------------------------------------------------- */
.alert {
    padding: 0.75rem 1.25rem;
}

/* ----------------------------------------------------------
 * 23. Link colour
 *    BS4: a { color: #007bff }   hover: #0056b3
 *    BS5: a { color: #0d6efd }   hover: #0a58ca
 *    Any link that inherited Bootstrap's default blue would
 *    look slightly different. Restore BS4 blue.
 * ---------------------------------------------------------- */
a {
    color: #007bff;
}
a:hover {
    color: #0056b3;
}

/* ----------------------------------------------------------
 * 24. .table border colour
 *    BS4: --border: #dee2e6 — same default in BS5
 *    .table-bordered: border-color in BS4 was #dee2e6
 *    No meaningful change — included for completeness.
 *    .table-striped odd-row background: rgba(0,0,0,.05) — same.
 * ---------------------------------------------------------- */

/* ----------------------------------------------------------
 * 25. Inline spacing on .row > .col at xs (no breakpoint)
 *    BS4 included col-xs-* (Bootstrap 3 legacy). BS4 dropped
 *    the xs infix so col-xs-6 = col-6. BS5 same. No fix needed.
 * ---------------------------------------------------------- */