/* Bootstrap Custom UI Compatibility CSS */

/* Ensure Bootstrap containers don't add their own backgrounds */
.bootstrap-container {
    background: transparent;
}

/* Reset any Bootstrap CSS custom properties that might interfere */
:root {
    /*--bs-body-bg: transparent;*/
}

/* Set border-box as default to work well with Bootstrap */
html {
    box-sizing: border-box;
}

/* Keep your existing inheritance rule for old HTML */
*, :before, :after {
    box-sizing: inherit !important;
}

/* Override Bootstrap components to use border-box explicitly */
.modal, .modal-dialog, .modal-content, .modal-header, .modal-body, .modal-footer,
.dropdown, .dropdown-menu, .dropdown-item,
.btn, .btn-group, .btn-toolbar,
.form-control, .form-select, .form-check, .input-group,
.card, .card-header, .card-body, .card-footer,
.navbar, .navbar-brand, .navbar-nav, .nav, .nav-item, .nav-link,
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl,
.row, .col, [class*="col-"],
.alert, .badge, .breadcrumb, .pagination, .progress,
.accordion, .carousel, .collapse, .offcanvas, .toast, .tooltip, .popover {
    box-sizing: border-box !important;
}

/* Also apply to all children and pseudo-elements of Bootstrap components */
.modal *, .modal-dialog *, .modal-content *, .modal-header *, .modal-body *, .modal-footer *,
.dropdown *, .dropdown-menu *, .dropdown-item *,
.btn *, .btn-group *, .btn-toolbar *,
.form-control *, .form-select *, .form-check *, .input-group *,
.card *, .card-header *, .card-body *, .card-footer *,
.navbar *, .navbar-brand *, .navbar-nav *, .nav *, .nav-item *, .nav-link *,
.container *, .container-fluid *, .container-sm *, .container-md *, .container-lg *, .container-xl *, .container-xxl *,
.row *, .col *, [class*="col-"] *,
.alert *, .badge *, .breadcrumb *, .pagination *, .progress *,
.accordion *, .carousel *, .collapse *, .offcanvas *, .toast *, .tooltip *, .popover * {
    box-sizing: border-box !important;
}

.modal *:before, .modal *:after, .modal-dialog *:before, .modal-dialog *:after,
.dropdown *:before, .dropdown *:after, .dropdown-menu *:before, .dropdown-menu *:after,
.btn *:before, .btn *:after, .btn-group *:before, .btn-group *:after,
.form-control *:before, .form-control *:after, .input-group *:before, .input-group *:after,
.card *:before, .card *:after, .navbar *:before, .navbar *:after, .nav *:before, .nav *:after,
.container *:before, .container *:after, .container-fluid *:before, .container-fluid *:after,
.row *:before, .row *:after, .col *:before, .col *:after, [class*="col-"] *:before, [class*="col-"] *:after,
.alert *:before, .alert *:after, .pagination *:before, .pagination *:after {
    box-sizing: border-box !important;
}

body {
    background-color: unset;
}