/* BS5 overrides to maintain BS3-era layout */

/* BS3 primary button color (#337ab7) — BS5 changed this to #0d6efd.
   Restore via CSS variables so all button states stay consistent. */
.btn-primary {
    --bs-btn-bg: #337ab7;
    --bs-btn-border-color: #2e6da4;
    --bs-btn-hover-bg: #286090;
    --bs-btn-hover-border-color: #204d74;
    --bs-btn-active-bg: #286090;
    --bs-btn-active-border-color: #204d74;
    --bs-btn-disabled-bg: #337ab7;
    --bs-btn-disabled-border-color: #2e6da4;
}

/* BS3's .center-block utility (display:block; margin:auto) was removed in BS5.
   Restore it so server-rendered markup using this class still centers correctly. */
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Duration risk score: use flex centering so the donut chart centers in its column
   regardless of the chart's rendered width. */
#riskscore {
    display: flex;
    justify-content: center;
}

/* BS3's .col-* classes always had position:relative (grid positioning context).
   BS5 dropped this, breaking any absolutely-positioned child that relied on it
   (e.g. icons pinned inside a column via inline position:absolute). */
[class*="col-"] {
    position: relative;
}

/* Container width - override BS5 max-width to match previous 95% layout */
.container {
    max-width: none;
    width: var(--containerwidth, 95%);
}

/* BS3 grid compat: columns without a .row parent should still layout inline.
   BS3 used floats so columns worked anywhere; BS5 uses flexbox requiring .row parent.
   Only apply to elements that directly contain col-* children but are NOT .row themselves
   and do NOT contain a .row child (to avoid double-flexing). Covers server-generated
   markup that nests col-* directly inside another col-* without an intervening .row
   (e.g. admin templates' "Roles/Groups" header pairs inside a .col-md-12). */
fieldset:has(> [class*="col-"]):not(:has(> .row)),
div.form-group:has(> [class*="col-"]),
div[class*="col-"]:has(> [class*="col-"]):not(:has(> .row)) {
    display: flex;
    flex-wrap: wrap;
}

/* Also handle nested structures in server-generated HTML */
fieldset > [class*="col-"],
.form-content > [class*="col-"] {
    float: none;
}

/* Refine section specific - ensure col-sm-4 fields layout in rows */
fieldset {
    display: flex;
    flex-wrap: wrap;
}

fieldset > legend {
    flex-basis: 100%;
}

/* Confounding factors checkboxes spacing */
.comorbidcheckbox,
.checkbox-list .checkbox,
[class*="comorbidcheckbox"] {
    margin-bottom: 0.5rem;
    margin-right: 0.25rem;
    white-space: nowrap;
}

/* Quick search circle images - ensure table layout for centering */
.quick-search .thumbnail {
    display: table !important;
}

.quick-search .thumbnail a {
    vertical-align: middle;
    display: table-cell !important;
    text-align: center;
}

.quick-search .thumbnail img {
    display: inline-block;
    margin: 0 auto;
}

/* Remove dropdown caret from elements not inside a .dropdown container */
.dropdown-toggle:not(.dropdown > .dropdown-toggle)::after {
    display: none !important;
}

/* Only show caret on actual dropdown triggers inside .dropdown */
.dropdown > .dropdown-toggle::after,
.dropdown > a.dropdown-toggle::after,
.dropup > .dropdown-toggle::after {
    display: inline-block !important;
}

/* checkbox class (BS3 form element, removed in BS5) */
.checkbox {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* checkbox wrapper containing col-* grid children (e.g. confounding factors) */
.checkbox:has(> [class*="col-"]) {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 100%;
    max-width: 100%;
}

.checkbox label {
    padding-left: 5px;
    cursor: pointer;
}

/* Make form-group a flex row when it contains columns */
.form-group:has(> [class*="col-"]) {
    display: flex;
    flex-wrap: wrap;
}

/* Restore block behavior for elements that shouldn't flex */
.tab-content, .navbar-collapse, .carousel-inner {
    display: block !important;
}

/* Tab panes - ensure only active one is visible */
.tab-content > .tab-pane {
    display: none;
}

.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show.active {
    display: block;
}

/* tabs-left (BS3 pattern for vertical left-aligned tabs) */
.tabbable.tabs-left {
    display: flex;
}

.tabbable.tabs-left > .nav-tabs {
    flex-direction: column;
    border: none;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    min-width: 200px;
    background: none;
    border-radius: 0;
}

.tabbable.tabs-left > .nav-tabs > li {
    flex: none;
    text-align: left;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
}

.tabbable.tabs-left > .nav-tabs > li:has(> a.active) {
    background-color: #fff;
    border-left: 1px solid #ddd;
    box-shadow: 1px 0 0 0 #fff;
}

.tabbable.tabs-left .tab-pane {
    border-left: none;
}

.tabbable.tabs-left > .nav-tabs > li > a {
    border: none;
    border-right: none;
    border-radius: 0;
    margin-right: -1px;
    padding: 8px 15px;
}

/* tabs-left link styling */
.tabs-left > .nav-tabs > li > a {
    color: #3B4149;
    text-decoration: none;
    padding: 8px 15px;
    display: block;
    font-weight: 700 !important;
}

.tabs-left > .nav-tabs > li > a:hover {
    color: #025893;
    text-decoration: none;
    background-color: #f0f0f0;
}

.tabbable.tabs-left > .nav-tabs > li > a.active {
    color: #025893;
    background-color: #fff;
}

.tabbable.tabs-left > .tab-content {
    flex: 1;
    overflow: hidden;
}

/* Navbar - restore BS3-era appearance */
.navbar-header {
    display: flex;
    align-items: center;
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav > li > a {
    color: #f5f5f5 !important;
    padding: 5px 10px;
    text-decoration: none;
}

/* Ensure FA icons in navbar render correctly (need font-weight 900 for solid) */
.navbar .fa,
.navbar .fas {
    font-weight: 900;
    font-size: 16px;
}

/* Navbar nav items without BS5 classes - ensure they display inline */
.navbar-nav > li {
    list-style: none;
    display: list-item;
}

.navbar-nav > li > a {
    display: block;
    padding: 0.5rem 0.75rem;
    color: inherit;
    text-decoration: none;
    min-width: 20px;
    text-align: center;
}

.navbar-nav > li > a > span.fa,
.navbar-nav > li > a > .fa {
    display: inline-block;
    font-weight: 900;
    min-width: 1em;
}

/* Icon-only navbar links (admin gear, emulate eye, switch role) */
header .navbar-nav.withdropdown > li[role="presentation"] > a,
header .navbar-nav.withdropdown > li.dropdown > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    color: #f5f5f5 !important;
}

header .navbar-nav.withdropdown > li[role="presentation"] > a > .fa,
header .navbar-nav.withdropdown > li.dropdown > a > .fa {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    display: inline-block !important;
    color: inherit !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* Remove dropdown caret from icon-only nav items */
.navbar-nav > li > a[data-bs-toggle="modal"]::after,
.navbar-nav > li > a[aria-label]::after {
    display: none !important;
}

.navbar-nav.withdropdown > li {
    display: inline-block;
}

.navbar-right,
.navbar-nav.navbar-right {
    margin-left: auto;
}

/* nav-pills with float-end: BS5 .nav is flex which ignores float.
   Use margin-left:auto to push right within a flex parent, or
   override to inline display when used as a simple right-aligned link list. */
.nav-pills.float-end {
    justify-content: flex-end;
    margin-left: auto;
}

/* nav-pills item spacing (BS3 gave pills padding, BS5 only styles .nav-link) */
.nav-pills > li {
    padding: 0 5px;
}

.nav-pills > li > a {
    padding: 10px 15px;
    display: block;
    text-decoration: none;
}

/* Dropdown menu links - BS3 styled li > a directly; BS5 requires .dropdown-item */
.dropdown-menu > li > a {
    display: block;
    padding: 5px 20px;
    clear: both;
    font-weight: normal;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #262626;
    background-color: #f5f5f5;
}

/* select.form-control - BS5 uses form-select for selects; form-control removes
   native dropdown arrow. Restore native appearance for select elements. */
select.form-control {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    padding-right: 1.5rem;
}

/* Treatment filter reset button - float ignored in flex parent */
#treatmentfilters > .row {
    align-items: center;
}

#treatmentfilters > .row > .btn {
    margin-left: auto;
    width: auto;
}

/* Ensure navbar-collapse shows on desktop even with BS3 markup structure */
@media (min-width: 768px) {
    .navbar-collapse {
        display: flex !important;
        justify-content: flex-end;
        flex-basis: auto;
    }

    .navbar-toggler {
        display: none;
    }
}

/* icon-bar (BS3 hamburger lines) - BS5 uses navbar-toggler-icon instead */
.navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #fff;
    margin: 4px 0;
}

.navbar-toggler {
    border-color: rgba(255,255,255,0.1);
}

/* Search form - restore form-control-feedback positioning (removed in BS5) */
.has-feedback {
    position: relative;
}

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 2;
    display: block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    pointer-events: none;
    font-size: 1.5em;
}

/* Override legacy myodg.min.css #ico-search values (top:4px,right:28px).
   bs5-overrides.css loads after myodg.min.css on all pages, so this wins. */
#ico-search {
    top: -2px;
    right: 12px;
    line-height: 60px;
}

.input-lg, .form-control.input-lg {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

.form-control.input-lg.input-search {
    height: 60px;
    padding: 12px 18px 12px 36px;
    border-radius: 2em;
    border-color: #afafaf;
}

/* input-sm (removed in BS5) */
.input-sm, .form-control.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* Nav tabs - prevent dropdown caret from appearing on tab links */
.nav-tabs .nav-link::after,
.nav-tabs > li > a::after,
.nav-tabs [data-bs-toggle="tab"]::after {
    display: none !important;
}

/* Quick search icons - prevent caret on links with data-bs-toggle that aren't dropdowns */
a[data-bs-toggle="tab"]::after,
a[data-bs-toggle="pill"]::after {
    display: none !important;
}

/* Nav tabs - restore BS3 list-based tab layout (main page tabs only) */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

#tabsList.nav-tabs {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Clinical content topic tabs - classic BS3 tab style */
.clinical-content-st-tabs.nav-tabs {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
}

.clinical-content-st-tabs.nav-tabs > li > a {
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    background-color: transparent;
    padding: 8px 15px;
    margin-bottom: -1px;
}

.clinical-content-st-tabs.nav-tabs > li > a.active,
.clinical-content-st-tabs.nav-tabs > li.active > a {
    border: 1px solid #ddd;
    border-bottom-color: transparent;
    background-color: #fff;
    position: relative;
    bottom: -1px;
    padding-bottom: 9px;
}

.nav-tabs > li,
.nav-tabs .nav-item {
    margin-bottom: 0;
    display: list-item;
    list-style: none;
    text-align: center;
}

#tabsList > li,
#tabsList .nav-item {
    flex: 1;
}

.nav-tabs > li > a,
.nav-tabs .nav-link {
    display: block;
    color: #3B4149;
    border: none;
    border-right: 1px solid #ddd;
    border-radius: 0;
    padding: 10px 15px;
    text-decoration: none;
}

.nav-tabs > li:last-child > a,
.nav-tabs .nav-item:last-child .nav-link {
    border-right: none;
}

.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover {
    background-color: #e8e8e8;
    color: #025893;
}

/* BS3 active tab compat: extend all tabs 1px below the nav-tabs bottom border.
   Scoped to horizontal tabs only — vertical (tabs-left) resets below. */
.nav-tabs > li {
    margin-bottom: -1px;
}

/* Active tab: full border with transparent bottom covers the container's border-bottom line */
.nav-tabs > li.active > a,
.nav-tabs .nav-link.active {
    color: #025893;
    background-color: #fff;
    font-weight: bold;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.dropdown-menu li.divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, .15);
    display: block;
}

/* BS3 default: labels were bold (except inside checkboxes) */
label {
    font-weight: 700;
}

.checkbox label {
    font-weight: normal;
}

/* Base font size - Bootstrap 3 set html { font-size: 10px }, but switching to 10px here would make
   Bootstrap 5's body { font-size: 1rem } render as 10px (unreadable). Use 14px to keep body text
   legible. Chart sizes in auto.css use explicit px values to match production's 10px-based output. */
html {
    font-size: 14px;
}

/* Claim/contact info labels - generated with 1.65rem expecting 10px root (= 16.5px).
   Override to fixed px to match production appearance at 14px root. */
.claim-contact-label {
    font-size: 16.5px !important;
}

/* Breadcrumb separator - BS5 uses .breadcrumb-item::before, not li::before */
.breadcrumb-item + .breadcrumb-item::before {
    content: "|";
    color: #ccc;
}

/* Job Profile tutorial video - iframe wrapped in .row by server code.
   Neutralize BS5 .row flex/gutter rules so the iframe renders at native size. */
#genericdol > div > .row {
    display: block;
    margin: 0;
    padding: 0;
}

#genericdol > div > .row > iframe {
    width: 600px;
    height: 400px;
    padding: 0;
    margin: 0;
}

/* Body background - restore from myodg.min.css (BS5 overrides to #fff) */
body {
    background-color: #efefef;
}

/* BS3 clearfix on container - needed for proper margin collapse behavior */
.container::before,
.container::after {
    display: table;
    content: " ";
}

.container::after {
    clear: both;
}



/* btn-default (for third-party plugins that still use it) */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

/* Fee schedule / retired icons - btn-secondary replaced btn-default in migration.
   Restore white appearance to match original styling. */
a.fee-schedule-icon.btn-secondary,
a.retired-icon.btn-secondary {
    background-color: #fff;
    border-color: #ccc;
    color: #333;
}

/* btn-xs (removed in BS4+, still used by Bootstrap-Toggle plugin) */
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* Classic search results - prevent staircase from nested cols */
#search-results-div {
    --bs-gutter-x: 0;
    padding-left: 15px;
}

#search-results-div .form-group {
    display: block;
    margin-bottom: 0.25rem;
    overflow: hidden;
}

/* Only zero padding on nested cols (col inside col), not direct row children or hierarchy classes */
#search-results-div [class*="col-"] [class*="col-"]:not(.search-subsection-group):not(.search-topic-group):not(.search-result-item) {
    --bs-gutter-x: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure new search results (direct row children) stay full width */
#search-results-div > .row > [class*="col-"],
#search-results-div .row > .searchresult {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

#search-results-div h2 {
    margin-bottom: 0.5rem;
    margin-left: 5px;
}

#search-results-div h4:not(.statusformat) {
    margin-bottom: 0.25rem;
}

/* Search results hierarchy */
#search-results-div .search-section-title {
    margin-left: 20px;
}

.search-subsection-group {
    padding-left: 40px;
}

.search-topic-group {
    padding-left: 60px;
}

.search-result-item {
    padding-left: 80px;
}

/* Reset h4 left margin within hierarchy classes — indentation handled by container padding */
.search-subsection-group h4,
.search-topic-group h4,
.search-result-item h4 {
    margin-left: 0;
}

/* Treatment planning content - ensure lists display vertically */
#planning-results ul,
#planning-results ol {
    display: block;
    padding-left: 40px;
}

#planning-results li {
    display: list-item;
}

/* Treatment planning selection - float-end doesn't work in flex row.
   Use margin-left:auto to push to the right within the flex parent. */
#treatment-planning-selection {
    margin-left: auto;
}

/* Treatment search results - prevent text wrapping under the floated badge.
   The h4.statusformat contains only the badge span and is float:left.
   The <a> link and chapter text are siblings. Use padding-left on the
   container to indent all content, with the badge pulled back via margin. */
.treatmentresults {
    padding-left: 36px;
    overflow: hidden;
}

.treatmentresults > h4.statusformat {
    margin-left: -36px;
    margin-right: 0;
    width: 36px;
}

/* Archive search results: ul.nav.nav-pills.float-end in #archive-contents is float: right.
   Without clear: right, that float intrudes into this div and narrows only the first
   result group (the one that overlaps the float's vertical height). Clearing pushes this
   div below the float so all groups get consistent full width. */
#archive-search-results {
    clear: right;
}

/* Archive search results: br.clear-both is a BS3 clearfix remnant with no purpose in flex layout.
   Hiding it removes the flex item that was offsetting the first result row in each group. */
#archive-search-results-content .row > br {
    display: none;
}

/* Archive search results: force consistent indentation for all result rows. */
#archive-search-results-content .row > .treatmentresults {
    margin-left: 25px !important;
}

/* Archive search results: fix badge circles - same float/display fix as regular search results */
#archive-search-results span.recommendatiotype {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

/* Treatment result items: flex layout aligns badge circle with title text */
#search-results-div .search-result-item .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

#search-results-div .search-result-item .form-group h3 {
    float: none;
    flex-shrink: 0;
    margin-left: 0;
    margin-bottom: 0;
}

#search-results-div .search-result-item .form-group h3 span.recommendatiotype {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

/* Bootstrap-Toggle position fix */
.list-view-toggle {
    display: block;
    text-align: right;
    width: 100%;
}

/* btn-block (removed in BS5) */
.btn-block {
    display: block;
    width: 100%;
}

/* DataTables - keep "Show X entries" inline */
.dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dataTables_length select {
    width: auto;
    display: inline-block;
}

/* DataTables search box - keep "Search:" label and input on the same line */
.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* DataTables pagination - connected button group with dividers */
.dataTables_paginate .pagination {
    display: inline-flex;
    padding-left: 0;
    list-style: none;
}

.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span {
    display: block;
    padding: 6px 12px;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
    border-radius: 0;
}

.dataTables_paginate .pagination > li:first-child > a,
.dataTables_paginate .pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.dataTables_paginate .pagination > li:last-child > a,
.dataTables_paginate .pagination > li:last-child > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.dataTables_paginate .pagination > li.active > a,
.dataTables_paginate .pagination > li.active > span {
    color: #fff;
    background-color: #025893;
    border-color: #025893;
    z-index: 1;
    position: relative;
}

.dataTables_paginate .pagination > li > a:hover {
    color: #fff;
    background-color: #013355;
    border-color: #013355;
    z-index: 1;
    position: relative;
}

/* btn-group-justified (removed in BS4+) */
.btn-group-justified {
    display: flex;
    width: 100%;
}

.btn-group-justified > .btn-group,
.btn-group-justified > .btn {
    flex: 1;
}

.btn-group-justified > .btn-group > .btn {
    width: 100%;
}

/* form-group spacing (removed in BS5, restore as row-like flex container) */
.form-group {
    margin-bottom: 1rem;
}

.form-group:has(> [class*="col-"]) {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.form-group > [class*="col-"] {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
}

/* form-horizontal (removed in BS5) */
.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}

/* col-sm-* inside form-group should flex like in a row */
.form-group > [class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .form-group > .col-sm-1, .form-group > [class*="col-sm-1"] { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .form-group > .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .form-group > .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .form-group > .col-sm-4, .form-group > [class~="col-sm-4"] { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .form-group > .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .form-group > .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .form-group > .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .form-group > .col-sm-8, .form-group > [class~="col-sm-8"] { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .form-group > .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .form-group > .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .form-group > .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .form-group > .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* col-sm-* inside .checkbox wrapper (confounding factors grid) */
.checkbox > [class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .checkbox > .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .checkbox > .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* input-group-addon (renamed to input-group-text in BS5) */
.input-group-addon {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
}

.input-group > .input-group-addon:first-child {
    border-right: 0;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.input-group > .input-group-addon:last-child {
    border-left: 0;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.input-group > .input-group-addon + .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* panel (removed in BS5 - replaced by card but keeping for compatibility) */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-body {
    padding: 15px;
}

.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

/* well (removed in BS5) */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

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

.text-left {
    text-align: left !important;
}

/* .hidden utility class (removed in BS5) */
.hidden {
    display: none !important;
}

/* hidden-* responsive utilities (removed in BS5) */
@media (max-width: 575.98px) {
    .hidden-xs { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .hidden-sm { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .hidden-md { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hidden-lg { display: none !important; }
}

/* visible-* responsive utilities */
.visible-xs, .visible-sm, .visible-md, .visible-lg {
    display: none !important;
}
@media (max-width: 575.98px) {
    .visible-xs { display: block !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .visible-sm { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .visible-md { display: block !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .visible-lg { display: block !important; }
}

/* jQuery UI dialog - restore close button after BS5 reboot */
.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    top: 50%;
    margin: -11px 13px 0 0;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #e6e6e6;
    cursor: pointer;
    width: 22px;
    height: 22px;
    font-size: 0;
    text-indent: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-dialog .ui-dialog-titlebar-close span {
    display: none;
}

.ui-dialog .ui-dialog-titlebar-close::after {
    content: "\00d7";
    font-size: 18px;
    font-weight: 400;
    color: #666;
    line-height: 1;
}

.ui-dialog .ui-dialog-titlebar-close:hover::after {
    color: #000;
}

/* BS5 sets caption-side:bottom; restore BS3's top positioning */
caption {
    caption-side: top;
}

/* BS5 .table adds border-top:2px solid currentcolor on :not(:first-child) sections (tbody after thead).
   currentcolor resolves to the body text color (~#555), producing a thick dark separator.
   Override to match BS3's light gray table border. */
.table > :not(:first-child) {
    border-top-color: var(--bs-border-color) !important;
}

/* BS5 cells only set border-bottom-width; color defaults to currentcolor (dark).
   Explicitly set to the standard light-gray border color to match BS3's #ddd. */
.table > :not(caption) > * > * {
    border-bottom-color: var(--bs-border-color);
}

/* DataTables standalone CSS (jquery.dataTables.css) sets border-bottom:#111 on thead cells.
   Override to use BS5's standard border color (light gray). */
table.dataTable thead th,
table.dataTable thead td {
    border-bottom-color: var(--bs-border-color);
    border-top-color: var(--bs-border-color);
}

/* table-condensed (renamed to table-sm in BS4+) */
.table-condensed > :not(caption) > * > * {
    padding: .25rem;
}

/* DataTables applies stripe/sort-column background on <tr>; BS5's .table applies
   background-color via CSS vars on <td>, overriding the row color. Use inherit so
   <td> picks up the DataTables row background. */
table.dataTable tbody td {
    background-color: inherit;
}

/* Duration scenario table: preserve inline tr background highlighting
   that BS5's table box-shadow mechanism would otherwise cover */
.scenario-list.table > tbody > tr.highlight-values > td {
    --bs-table-accent-bg: transparent;
    --bs-table-bg-state: transparent;
    background-color: inherit;
}

/* BS5 uses rgba(0,0,0,0.175) for table borders which appears very dark over
   coloured rows (e.g. cyan highlight). Use a solid light grey to match BS3. */
.scenario-list.table {
    --bs-table-border-color: #dee2e6;
}

/* BS5 reboot sets th { font-weight: bolder }; scenario table headers should
   match the plain weight they had under the old stylesheet. */
.scenario-list.table thead th {
    font-weight: 700;
}

/* ECC section tabs: maintain original sizing inside tabs-left */
.tabs-left > .nav-tabs.clinical-content-section-tab {
    min-width: 155px;
    max-width: 155px;
}

.tabs-left > .nav-tabs.clinical-content-section-tab > li > a {
    padding: 8px 15px;
    font-size: 13px;
}

/* Risk score panel: float has no effect in flex containers, use flex instead */
ul#risk-panel {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    list-style: none;
}