/* ============================================================ Bootstrap 3 -> Bootstrap 5 compatibility layer ------------------------------------------------------------ Counted across the 497 Razor views in this application: 6,108 col-md-* / pull-left / pull-right 2,863 form-group (deleted in Bootstrap 5) 249 btn-default (deleted in Bootstrap 4) 152 panel (became card in Bootstrap 4) Editing those by hand is ~9,000 edits in a templating language with no compile-time checking, where a mistake surfaces as a blank HTTP 500 rather than a build error. Re-declaring the old class names in terms of Bootstrap 5 is a few hundred lines and is verifiable by loading a page. Grid classes are the happy exception: .row and .col-*-N still exist in Bootstrap 5 with the same meaning, so the largest single count above needs nothing at all. This is a bridge, not a destination. Views converted properly to Bootstrap 5 markup stop depending on it, and it shrinks. ============================================================ */ /* ---------- Layout helpers removed in Bootstrap 4/5 ---------- */ .pull-left { float: left !important; } .pull-right { float: right !important; } .center-block { display: block; margin-left: auto; margin-right: auto; } .hidden { display: none !important; } .show { display: block !important; } .invisible { visibility: hidden; } /* Bootstrap 3 spelling of the alignment utilities. */ .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } /* Bootstrap 3 responsive visibility classes. */ .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } @media (max-width: 767.98px) { .visible-xs { display: block !important; } .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .visible-sm { display: block !important; } .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .visible-md { display: block !important; } .hidden-md { display: none !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } .hidden-lg { display: none !important; } } /* ---------- Images ---------- */ .img-responsive { display: block; max-width: 100%; height: auto; } .img-circle { border-radius: 50%; } .img-rounded { border-radius: .475rem; } /* ---------- Forms ---------- */ /* form-group carried the vertical rhythm of every form in the app. */ .form-group { margin-bottom: 1.25rem; } .form-group:last-child { margin-bottom: 0; } .control-label { font-weight: 500; color: var(--bs-gray-700, #4b5675); margin-bottom: .5rem; } /* In Bootstrap 3 a .form-group inside .form-horizontal WAS a .row - that is how every col-md-4 label / col-md-8 control pair in this app lines up. Bootstrap 5 dropped that, which drops the label on top of the field on ~2,800 form rows. Restore the row behaviour. */ .form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem)); margin-left: calc(-.5 * var(--bs-gutter-x, 1.5rem)); } .form-horizontal .form-group > [class*="col-"] { padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); } /* Horizontal forms put the label in a column; keep it aligned with the control rather than floating above it. */ .form-horizontal .control-label { margin-bottom: 0; padding-top: calc(.75rem + 1px); text-align: right; } @media (max-width: 767.98px) { .form-horizontal .control-label { text-align: left; padding-top: 0; margin-bottom: .5rem; } } /* Bootstrap 3 validation states -> Bootstrap 5 colours. */ .has-error .form-control, .has-error .form-select { border-color: var(--bs-danger, #f8285a); } .has-error .control-label, .has-error .help-block { color: var(--bs-danger, #f8285a); } .has-success .form-control { border-color: var(--bs-success, #17c653); } .has-success .control-label { color: var(--bs-success, #17c653); } .has-warning .form-control { border-color: var(--bs-warning, #f6c000); } .has-warning .control-label { color: var(--bs-warning, #f6c000); } .help-block { display: block; margin-top: .375rem; font-size: .875rem; color: var(--bs-gray-600, #99a1b7); } .input-group-addon { display: flex; align-items: center; padding: .75rem 1rem; background-color: var(--bs-gray-100, #f9f9f9); border: 1px solid var(--bs-gray-300, #dbdfe9); border-radius: .475rem; } /* Bootstrap 3 wrapped an input-group button in . Bootstrap 5 removed that class entirely - a button is now a direct flex child of .input-group. 81 views still ship the old markup, mostly the date-picker calendar button:
Unstyled, that span stays an inline box outside the flex layout, so the button rendered oversized and detached from the field. Making the span a flex item and letting the button fill it restores the pairing without touching a single view. */ .input-group > .input-group-btn { display: flex; align-items: stretch; } .input-group > .input-group-btn > .btn { display: inline-flex; align-items: center; justify-content: center; height: auto; margin: 0; padding: .55rem .9rem; line-height: 1.5; border: 1px solid var(--bs-gray-300, #dbdfe9); /* Butt up against the field: no doubled border, square on the joining side, rounded on the outer side only. */ border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: .475rem; border-bottom-right-radius: .475rem; } /* The field must not keep its right-hand radius when a button follows. */ .input-group > .form-control:not(:last-child), .input-group > .input-group-btn:not(:first-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .input-group-btn:last-child > .btn { border-top-right-radius: .475rem; border-bottom-right-radius: .475rem; } /* Metronic 3 wrote the neutral button as two classes, `class="btn default"`, not Bootstrap's `btn-default` - so the rule below it never matched and these buttons rendered with no styling at all. */ .btn.default { --bs-btn-color: var(--bs-gray-800, #252f4a); --bs-btn-bg: var(--bs-body-bg, #fff); --bs-btn-border-color: var(--bs-gray-300, #dbdfe9); --bs-btn-hover-bg: var(--bs-gray-100, #f9f9f9); --bs-btn-hover-border-color: var(--bs-gray-400, #c4cada); --bs-btn-hover-color: var(--bs-gray-900, #071437); --bs-btn-active-bg: var(--bs-gray-200, #f1f1f4); --bs-btn-active-border-color: var(--bs-gray-400, #c4cada); color: var(--bs-gray-800, #252f4a); background-color: var(--bs-body-bg, #fff); border-color: var(--bs-gray-300, #dbdfe9); } /* Bootstrap 3 used .checkbox / .radio wrappers. */ .checkbox, .radio { position: relative; display: block; margin-bottom: .75rem; } .checkbox label, .radio label { padding-left: 1.5rem; margin-bottom: 0; font-weight: 400; } .checkbox input[type="checkbox"], .radio input[type="radio"] { margin-left: -1.5rem; margin-top: .25rem; position: absolute; } /* ---------- Buttons ---------- */ /* btn-default disappeared in Bootstrap 4; it was the neutral button everywhere in this app, including every modal's Close. */ .btn-default { --bs-btn-color: var(--bs-gray-800, #252f4a); --bs-btn-bg: var(--bs-body-bg, #fff); --bs-btn-border-color: var(--bs-gray-300, #dbdfe9); --bs-btn-hover-color: var(--bs-gray-900, #071437); --bs-btn-hover-bg: var(--bs-gray-100, #f9f9f9); --bs-btn-hover-border-color: var(--bs-gray-400, #c4cada); --bs-btn-active-color: var(--bs-gray-900, #071437); --bs-btn-active-bg: var(--bs-gray-200, #f1f1f4); --bs-btn-active-border-color: var(--bs-gray-400, #c4cada); --bs-btn-disabled-color: var(--bs-gray-500, #99a1b7); --bs-btn-disabled-bg: var(--bs-body-bg, #fff); --bs-btn-disabled-border-color: var(--bs-gray-300, #dbdfe9); } /* Bootstrap 3 sizing spellings. */ .btn-xs { padding: .25rem .65rem; font-size: .8rem; border-radius: .425rem; } /* ---------- Panels -> Cards ---------- */ .panel { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: var(--bs-card-bg, #fff); background-clip: border-box; border: 1px solid var(--bs-card-border-color, #f1f1f4); border-radius: .625rem; box-shadow: 0 3px 4px rgba(0, 0, 0, .03); margin-bottom: 1.5rem; } .panel-heading { padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--bs-card-border-color, #f1f1f4); font-weight: 600; color: var(--bs-gray-900, #071437); border-radius: .625rem .625rem 0 0; } .panel-title { margin: 0; font-size: 1.15rem; font-weight: 600; } .panel-body { flex: 1 1 auto; padding: 1.75rem; } .panel-footer { padding: 1.25rem 1.75rem; border-top: 1px solid var(--bs-card-border-color, #f1f1f4); border-radius: 0 0 .625rem .625rem; } /* Bootstrap 3 contextual panels. */ .panel-primary > .panel-heading { background: var(--bs-primary, #1b84ff); color: #fff; border-color: transparent; } .panel-success > .panel-heading { background: var(--bs-success, #17c653); color: #fff; border-color: transparent; } .panel-danger > .panel-heading { background: var(--bs-danger, #f8285a); color: #fff; border-color: transparent; } .panel-warning > .panel-heading { background: var(--bs-warning, #f6c000); color: #fff; border-color: transparent; } .panel-info > .panel-heading { background: var(--bs-info, #7239ea); color: #fff; border-color: transparent; } /* ---------- Tables ---------- */ /* Bootstrap 5 requires .table-responsive as a wrapper element; the Bootstrap 3 views often put it on the table itself. */ table.table-responsive { display: table; width: 100%; } /* ---------- Wells, badges, labels ---------- */ .well { padding: 1.25rem; background-color: var(--bs-gray-100, #f9f9f9); border: 1px solid var(--bs-gray-200, #f1f1f4); border-radius: .625rem; margin-bottom: 1.25rem; } /* .label became .badge in Bootstrap 4. */ .label { display: inline-block; padding: .35em .65em; font-size: .8125rem; font-weight: 500; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .425rem; color: #fff; } .label-default { background-color: var(--bs-gray-500, #99a1b7); } .label-primary { background-color: var(--bs-primary, #1b84ff); } .label-success { background-color: var(--bs-success, #17c653); } .label-info { background-color: var(--bs-info, #7239ea); } .label-warning { background-color: var(--bs-warning, #f6c000); } .label-danger { background-color: var(--bs-danger, #f8285a); } /* Bootstrap 3 badge was a pill counter. */ .badge.badge-pill { border-radius: 10rem; } /* ---------- Modal loading overlay (see bs3-compat.js) ---------- */ .ck-modal-loading { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(15, 26, 46, .25); } /* ---------- Modals ---------- */ /* The views declare the outer .modal only and let the loaded partial supply the header/body; bs3-compat.js injects the dialog and content wrappers Bootstrap 5 requires. Keep tall editors usable. */ .modal-dialog-scrollable .modal-body { overflow-y: auto; } /* Bootstrap 3's .modal-scroll / .container on the modal element are layout hints from the old plugin. .container in Bootstrap 5 is a real layout class - it pins a max-width and auto margins, which shrink-wraps the dialog to a sliver in the top-left. Neutralise it so Bootstrap 5's own modal sizing (and the data-width translated by bs3-compat.js) is what actually applies. */ .modal.container { width: 100%; max-width: none; padding: 0; margin: 0; } .modal.container > .modal-dialog { margin-left: auto; margin-right: auto; } /* Editors in this app are tall; let the body scroll rather than the dialog growing past the viewport. */ .modal-dialog-scrollable { max-height: calc(100vh - 3rem); } /* ============================================================ Bootstrap 3 .nav markup on the Bootstrap 5 engine. Bootstrap 3 styled the descendant selector `.nav > li > a`. Bootstrap 5 moved every one of those declarations onto a `.nav-link` class placed on the anchor itself and dropped the descendant selector entirely. Verified live in this app: not one loaded stylesheet matches `.nav > li > a`. Twenty-six views still use the old markup, twenty-two of them tabbed. The symptom is worse than "unstyled". A bare is display:inline, so its vertical padding overflows the line box instead of growing it. On the resident profile the anchors measured 74px tall inside 54px
  • s - every item overlapped the next by 10px, compounding down the list until the menu was unreadable. Rather than hand-write a Bootstrap 3 lookalike, these rules re-point Bootstrap 5's own declarations at the old selector and reuse the same custom properties. Bridged tabs are then identical to native Metronic 8 tabs and inherit any theme change for free. ============================================================ */ .nav > li > a { display: block; padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); font-size: var(--bs-nav-link-font-size); font-weight: var(--bs-nav-link-font-weight); color: var(--bs-nav-link-color); background: none; border: 0; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; } .nav > li > a:hover, .nav > li > a:focus { color: var(--bs-nav-link-hover-color); text-decoration: none; } .nav > li.disabled > a { color: var(--bs-nav-link-disabled-color); pointer-events: none; cursor: default; } /* Bootstrap 3 marked the selected tab with .active on the
  • ; Bootstrap 5 moved it to the anchor. Bridge both so a view can use either without its tab losing the active chrome. */ .nav-tabs > li > a { margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width)); border: var(--bs-nav-tabs-border-width) solid transparent; border-top-left-radius: var(--bs-nav-tabs-border-radius); border-top-right-radius: var(--bs-nav-tabs-border-radius); } .nav-tabs > li > a:hover, .nav-tabs > li > a:focus { isolation: isolate; border-color: var(--bs-nav-tabs-link-hover-border-color); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--bs-nav-tabs-link-active-color); background-color: var(--bs-nav-tabs-link-active-bg); border-color: var(--bs-nav-tabs-link-active-border-color); } .nav-pills > li > a { border-radius: var(--bs-nav-pills-border-radius); } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: var(--bs-nav-pills-link-active-color); background-color: var(--bs-nav-pills-link-active-bg); } /* Bootstrap 3's .nav-stacked and Metronic 5's .tabs-left / .tabs-right are vertical menus. Bootstrap 5's .nav is a flex ROW, so without an explicit column direction the items sit side by side and only stack by accidentally wrapping when the column happens to be narrow - which is exactly how the resident profile's LIC menu was laying itself out. */ .nav.nav-stacked, .nav.tabs-left, .nav.tabs-right { flex-direction: column; flex-wrap: nowrap; border-bottom: 0; } .nav.nav-stacked > li, .nav.tabs-left > li, .nav.tabs-right > li { width: 100%; } /* A vertical tab has no bottom edge to meet, so drop the negative margin that pulls a horizontal tab onto the strip's border and give it a normal radius on all four corners. */ .nav.nav-stacked > li > a, .nav.tabs-left > li > a, .nav.tabs-right > li > a { margin-bottom: 0; border-radius: var(--bs-nav-tabs-border-radius); } /* Long menu labels must wrap inside the item, never spill past it. */ .nav.nav-stacked > li > a, .nav.tabs-left > li > a, .nav.tabs-right > li > a { overflow-wrap: break-word; word-break: break-word; } /* ============================================================ Blocking overlay. App.blockUI emits
    and nothing ever styled it, so the spinner and its message rendered as bare floating text in the middle of whatever was being blocked. On the sign-in page that centre lands exactly on the password field, and with the old 0.05 overlay opacity the result read as "verifying user" typed INSIDE the password box - which is what it was reported as. Give it a real surface so it reads as an overlay panel, and dim the backdrop enough that the form behind it is obviously inert. It lives HERE, not in brand-theme.css: bs3-compat.js is what emits the class, and the sign-in page loads bs3-compat.css but not brand-theme - which is exactly why the first attempt at this fix changed nothing. ============================================================ */ .ck-blockui { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 12px; background: #fff; color: #1E2F53; font-size: 14px; font-weight: 600; box-shadow: 0 12px 32px -12px rgba(15, 26, 46, .45); border: 1px solid rgba(15, 26, 46, .08); white-space: nowrap; } .ck-blockui .spinner-border { color: #BB9648 !important; flex: 0 0 auto; } /* ============================================================ Modal close button (209 of them, across 201 views) Bootstrap 3 spelled it ``; Bootstrap 5 renamed it to `.btn-close` and ships an SVG glyph, so every legacy one lost its styling entirely and rendered as a bare default button - a pale grey box with a stray multiplication sign. It also moved. Bootstrap 3 put it on the right with `float: right`, but Bootstrap 5's `.modal-header` is `display: flex`, which ignores floats - and because the markup writes the button BEFORE the title, it became the first flex item and jumped to the LEFT of every modal. `order` fixes the position without touching the markup, and the rest restores the appearance. Deliberately drawn with the `×` glyph the markup already contains rather than an SVG, so nothing depends on an asset path, and in `currentColor` so it works on the light headers and the coloured ones alike. ============================================================ */ .modal-header > .close, .modal-header > button.close { order: 10; margin-left: auto; } .close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 24px; font-weight: 400; line-height: 1; text-shadow: none; opacity: .7; cursor: pointer; transition: opacity .15s ease, background-color .15s ease; } .close:hover { opacity: 1; background: rgba(0, 0, 0, .10); color: inherit; } /* On a dark or coloured header a black wash is invisible; lift instead. */ .modal-header[style*="gradient"] > .close:hover, .modal-header[style*="background:#"] > .close:hover, .modal-header.bg-primary > .close:hover, .modal-header.bg-dark > .close:hover { background: rgba(255, 255, 255, .22); } .close:focus-visible { outline: 2px solid #BB9648; outline-offset: 2px; opacity: 1; } /* `table-condensed` became `table-sm` in Bootstrap 4. */ .table-condensed > :not(caption) > * > * { padding: .35rem .5rem; } /* ============================================================ Select2 skin select2 is the project's dropdown standard and its JS ships inside plugins.bundle.js - but its CSS does not. style.bundle.css contains zero select2 rules, and none of the nine shells links the stylesheet that sits unused in Assets/global/plugins/select2/css/. So every select2 in the application has been rendering with `border: 0 none` on a transparent background: the closed control was bare text with an invisible caret, which is why a filter reading "All Titles" looked like a stray label rather than a dropdown. Skinned here rather than by linking the old file: that stylesheet is the Metronic 5 / Bootstrap 3 build and would fight the current form controls. This matches Bootstrap 5's .form-select instead, so a select2 and a plain