/* ============================================================================
   legacy-theme.css — the site's own theme layer, sitting on Bootstrap 5.

   Load order contract:  bootstrap5.css  →  THIS FILE  →  default.css
   (framework first, this file restores the site's look and neutralizes BS5
   defaults, site CSS keeps the final say — the slot bootstrap2.css occupied.)

   This started life as bs2-bridge.css, a deliberately temporary parity layer
   for the Bootstrap 2 → 5 migration, on the assumption it would burn down to
   nothing. It didn't, and the rename records why: most of what remains is not
   migration debt but the site's actual vocabulary. .btn, .well, .label,
   .thumbnail and the alert styles are how TotaLand looks — hundreds of views
   use them and there is no reason to restyle them into stock BS5. The reboot
   compensations and neutralizers are permanent too: they exist because BS5's
   opinions (border-box, line-height 1.5, floated legends, collapsed tables,
   container gutters) differ from the baseline this markup was authored
   against. Treat this as owned site CSS, not as scaffolding to be deleted.

   Values were copied from the retired wwwroot/css/bootstrap2.css (a
   hand-trimmed BS 2.0.1), with IE6-9 hacks dropped and gradient syntax
   modernized (identical rendering).

   Deliberately NOT covered here:
   - .well look, .pagination look, hidden-phone/visible-*, legend decoration,
     body/link typography — already owned by default.css / defaultResponsive.css.
   - .modal — every authenticated modal is a real BS5 modal since the flip.
   - the BS2 fluid grid and .accordion rules — retired in Phase 2; nothing
     referenced them any more.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. REBOOT COMPENSATIONS — BS5 reboot vs. the BS2-era baseline
   -------------------------------------------------------------------------*/

/* The site's trimmed bootstrap2.css never set a line-height, so the entire
   legacy layout was built on the browser default ("normal"). BS5's body
   line-height:1.5 loosened text everywhere and shifted fixed-height chrome
   (main tabs no longer met the 4px header bar). Restore the baseline. */
body {
  line-height: normal;
}

/* BS5 reboot floats legends (float:left; width:100%; font-size ~1.4rem) for
   its own fieldset layout. The site's fieldset/legend look is classic inline-
   in-border (default.css just sets font-size/margin) — restore that. */
legend {
  float: none;
  width: auto;
  padding: 0;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
}

/* ---- THE BOX MODEL --------------------------------------------------------
   The single widest behavioural change of the flip, and the root cause behind
   a string of unrelated-looking breakages (wrapped form rows, a doubled header
   bar, overlapping role tiles, collapsed session rows).

   BS5's reboot applies `box-sizing: border-box` to EVERY element. The legacy
   site was authored entirely under content-box: bootstrap2.css never reset the
   box model globally (it only forced content-box back onto search inputs), and
   the pre-flip Bootstrap 5 build scoped its reset to `.bs5 *`. So before the
   flip, everything outside a `.bs5` island was content-box — that, not
   border-box, is the baseline this markup was written against.

   Under border-box every fixed width/height that also carries padding or a
   border silently shrinks by exactly that padding+border, which is why the
   damage showed up as many small, unrelated-looking layout bugs rather than
   one obvious one. Restore content-box for legacy content, and keep border-box
   only where Bootstrap's own components need it: the `.bs5` islands (Map
   Builder) and the BS5 modal chrome. Note that modal CHROME is listed
   element-by-element rather than as `.modal *` — the converted dialogs are
   full of legacy markup that must stay content-box like the rest of the site. */
*,
*::before,
*::after {
  box-sizing: content-box;
}

.bs5,
.bs5 *,
.bs5 *::before,
.bs5 *::after,
.modal,
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.modal-backdrop,
.btn-close {
  box-sizing: border-box;
}

/* These four are border-box in the BROWSER's stylesheet, not in any of ours,
   and the pre-BS5 site simply inherited that (bootstrap2.css never reset the
   box model). The global content-box reset above is authored against the
   legacy baseline, so it must not clobber them — measured against the UA
   defaults: button/select/checkbox/radio are border-box, while text inputs,
   textarea, div and fieldset are content-box.
   Getting this wrong made every <select> ~8px taller and pushed jQuery UI's
   two 49%-wide datepicker month/year selects past 100%, wrapping them onto
   separate lines. */
button,
select,
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
}

/* BS2 paragraph metrics (BS5 reboot: font inherits body 73%≈11.7px and
   margin-bottom 1rem — both visibly different). */
p {
  margin: 0 0 9px;
  font-family: var(--tl-font);
  font-size: 13px;
  line-height: 18px;
}
p small {
  font-size: 11px;
  color: #999999;
}

/* Legacy tables draw their grid lines with cellspacing, not borders: the
   skin paints table.tablesorter grey (#CDCDCD) and its cells white, so the
   cellspacing="1" gap SHOWS THROUGH as the 1px grid. BS5's reboot sets
   border-collapse:collapse, which makes cellspacing a no-op — every one of
   the ~317 views using cellspacing lost its grid lines. BS2 set
   border-collapse:separate explicitly (bootstrap2.css:885) and left other
   tables at the browser default (also separate), so this restores the real
   baseline. .table is excluded: that's BS5's own component (Map Builder,
   TotaLand Academy), which is built for collapse. Tables that genuinely
   want collapse (table.lite / table.print-lite) set it in default.css,
   which loads after this file and wins the tie. */
table:not(.table) {
  border-collapse: separate;
}

/* BS2 base control normalization (BS5 uses font:inherit and no vertical-align,
   which shifts control/icon baselines site-wide). */
input,
button,
select,
textarea {
  margin: 0;
  font-family: var(--tl-font);
  font-size: 100%;
  vertical-align: middle;
}
textarea {
  overflow: auto;
  vertical-align: top;
  height: auto;
}
/* :not(.form-check-input) — Bootstrap 5's styled checks/switches size the input themselves
   (width/height/border-radius) and strip native appearance; this legacy metric rule out-specifies
   .form-check-input ((0,1,1) vs (0,1,0)), and width/height:auto on an appearance-less input collapses
   it to a sliver (the Map Builder style editor's switches vanished). Unclassed legacy checkboxes keep
   the BS2 metrics. */
input[type="image"],
input[type="checkbox"]:not(.form-check-input),
input[type="radio"]:not(.form-check-input) {
  width: auto;
  height: auto;
  padding: 0;
  margin: 3px 0;
  line-height: normal;
  cursor: pointer;
  border-radius: 0;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
  width: auto;
  height: auto;
}
input[type="file"] {
  width: auto;
  padding: initial;
  line-height: initial;
  border: initial;
  background-color: initial;
  box-shadow: none;
}

/* BS2 inset shadow + blue focus glow on text inputs (the site's focus look). */
input,
textarea {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border linear 0.2s, box-shadow linear 0.2s;
}
input:focus,
textarea:focus {
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  outline: 0;
}
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
  box-shadow: none;
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  background-color: #f5f5f5;
  border-color: #ddd;
  cursor: not-allowed;
}
/* Restore the "no entry" cursor on checkboxes and radios the user cannot tick — the Additional
   Paragraphs position boxes, among others.

   The rule above is (0,1,1). The checkbox/radio metrics rule near the top of this file carries
   :not(.form-check-input), which makes it (0,2,1), so ITS cursor:pointer was winning on disabled
   boxes and the not-allowed cursor never appeared. RADPI's bootstrap2.css:414 had no :not(), so it
   TIED with bootstrap2.css:584 at (0,1,1) and source order let not-allowed win.

   Re-state the pair at a specificity that wins, rather than dropping the :not() guard — the Bootstrap 5
   switches depend on that guard to keep their own metrics. [readonly] included because RADPI's
   bootstrap2.css:587 covered it too. */
input[type="checkbox"]:not(.form-check-input)[disabled],
input[type="radio"]:not(.form-check-input)[disabled],
input[type="checkbox"]:not(.form-check-input)[readonly],
input[type="radio"]:not(.form-check-input)[readonly] {
  cursor: not-allowed;
}
::placeholder {
  color: #999999;
}


/* ---------------------------------------------------------------------------
   2. CONTAINER NEUTRALIZERS
   The BS2 fluid grid (.row-fluid / .span1-12 and their sized-input variants)
   was RETIRED in the Phase-2 sweep: the authenticated side had only five
   usages left and all were inert, self-styled, or made explicit in place
   (Desktop/TrialStats now uses .trialStatsMain in TrialStats.css;
   WhatsNew/Index carries its float inline; Tract/Dashboard styles its own
   div.span6; #footer .span40 is a site class defaultResponsive.css targets,
   not a grid class). The public marketing pages still carry span/row-fluid
   markup, but _PublicLayout loads main.css only — never this file — and
   main.css defines no grid, so that markup is inert there too.

   What remains is NOT grid: .container / .container-fluid survive as
   neutralizers. Both names are used as ordinary site classes by legacy views
   (the Management/Index and Client/_roleContent tiles, Rescue pages), and
   BS5 gives them 12px gutter padding plus breakpoint max-widths that BS2
   never had — the gutter is what squeezed the floated role-permission
   columns out of their fixed-height boxes.
   -------------------------------------------------------------------------*/
.container {
  width: 940px;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}
.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}
.container-fluid {
  width: auto;
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: 0;
  margin-right: 0;
}
.container-fluid:before,
.container-fluid:after {
  display: table;
  content: "";
}
.container-fluid:after {
  clear: both;
}


/* ---------------------------------------------------------------------------
   3. FORMS — BS2 .radio/.checkbox wrappers (hanging-indent layout)
   -------------------------------------------------------------------------*/
.radio,
.checkbox {
  padding-left: 18px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  float: left;
  margin-left: -18px;
}
.radio.inline,
.checkbox.inline {
  display: inline-block;
  padding-top: 5px;
  margin-bottom: 0;
  vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 10px;
}
.form-actions {
  padding: 17px 20px 18px;
  margin-top: 18px;
  margin-bottom: 18px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
}


/* ---------------------------------------------------------------------------
   4. BUTTONS — BS2 .btn base, sizes, and color variants
   BS5 also defines .btn via --bs-btn-* custom properties; these concrete
   declarations load later and win, keeping today's gradient look for ALL
   .btn usage (bare and variant) until buttons are intentionally restyled.
   -------------------------------------------------------------------------*/
.close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 18px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  background: transparent;
  border: 0;
  padding: 0;
}
.close:hover {
  color: #000000;
  text-decoration: none;
  opacity: 0.4;
  cursor: pointer;
}

.btn {
  display: inline-block;
  text-decoration: none;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  background-color: #f5f5f5;
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #ccc;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #bbb;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  background-color: #e6e6e6;
}
.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #e6e6e6;
}
.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.active,
.btn:active {
  background-image: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: #e6e6e6;
  outline: 0;
}
.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-image: none;
  background-color: #e6e6e6;
  opacity: 0.65;
  box-shadow: none;
}
.btn-large {
  padding: 9px 14px;
  font-size: 15px;
  line-height: normal;
  border-radius: 5px;
}
.btn-large [class^="icon-"] {
  margin-top: 1px;
}
.btn-small {
  padding: 5px 9px;
  font-size: 11px;
  line-height: 16px;
}
.btn-small [class^="icon-"] {
  margin-top: -1px;
}
.btn-mini {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 14px;
}

.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  color: #ffffff;
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active {
  color: rgba(255, 255, 255, 0.75);
}
/* The Bootstrap 2 .btn-primary and .btn-warning fills that stood here (#0088cc -> #0044cc and
   #fbb450 -> #f89406) are gone; both variants are now driven from Bootstrap 5.3 by the block below,
   alongside success and danger. */
/* =================================================================================================
   COLOURED BUTTONS -- CONVERTED TO THE BOOTSTRAP 5.3 PALETTE.

   THE BUG. All four carried Bootstrap 2 gradient fills. Measured at every gradient stop, against the
   4.5:1 WCAG AA threshold, with the text colour each ACTUALLY rendered plus the alternative:

                 fill                     as shipped        white     near-black
       green     #62c462 -> #51a351        2.46  FAIL        2.19        5.56
       red       #ee5f5b -> #bd362f        3.81  fail        3.27        3.09
       blue      #0088cc -> #0044cc        1.19  FAIL        3.89        2.24
       amber     #fbb450 -> #f89406        3.12  fail        1.79        7.65

   Only green and amber could have been rescued by a text colour alone. Red and blue could not: both
   run LIGHT at the top and DARK at the bottom, so whichever text colour you pick, one end of the
   gradient loses. That is why this is a fill change and not merely a text change.

   Bootstrap 5.3's flat fills clear AA in every state, and note it uses BLACK on amber rather than
   white -- which is exactly the pair the old rule got backwards, and why amber was the worst of the
   four in practice at 1.79:1 wherever a view forced white on it:

       success  #198754 white   4.53 / 5.87 hover / 6.45 active
       danger   #dc3545 white   4.53 / 5.91 / 6.50
       primary  #0d6efd white   4.50 / 5.84 / 6.44
       warning  #ffc107 BLACK  12.88 / 13.74 / 14.04

   background-image MUST be reset explicitly: `.btn` above paints linear-gradient(#ffffff, #e6e6e6),
   which would otherwise cover the new background-color and leave a grey button.

   WHY THE ANCHOR SELECTORS BELOW ARE NOT REDUNDANT. The shared block at ".btn-primary, ...
   .btn-success" sets color:#ffffff, but it is specificity (0,1,0), and default.css -- which loads
   AFTER this file -- carries `a:link { color: #346689; }`. `:link` is a pseudo-CLASS, so a:link is
   (0,1,1) and WINS. Every one of these buttons written as an <a> was drawing link-blue text on its
   coloured fill (2.46:1 on green) while the identical markup on a <button> drew white. That
   anchor/button split is the signature of the bug, and it survives any change of fill.
   `a.btn-success:link` is (0,2,1) and takes it back. :hover and :active need naming too, because
   default.css has bare `a:hover`/`a:active` rules of the same (0,1,1) shape.

   Views were already working around this per-page, which is what made it look like a per-screen
   styling quirk rather than one shared bug. Views/Queue/UserApproval.cshtml:28 defines
   `.colorWhite { color: white !important; }` in its own <style> block, and
   Views/UserInvoice/View.cshtml:37 forces white on `a.resubmitButton` (a rule with no matching
   element, so it does nothing). Both sit on success/danger, where white is what this block supplies
   anyway, so they now agree with it rather than fighting it and are left alone.

   Views/BillingItemApproval/Index.cshtml was the exception and HAD to be edited: its white
   !important sat on `a.rejectButton`/`a.rejectAllButton`, which are btn-WARNING. Bootstrap 5.3 puts
   black on amber; forcing white there measures 1.63:1. See the note in that view.

   .btn-info and .btn-inverse keep their Bootstrap 2 fills below: neither has a single usage in any
   view, so converting them would be changing something nothing renders.
   ================================================================================================= */
/* NOT ONE HEX BELOW. Every value is read from Bootstrap 5.3's own --bs-btn-* custom properties, which
   bootstrap5.3/bootstrap.min.css declares ON the .btn-success / .btn-danger / .btn-primary /
   .btn-warning element itself. So these ARE the 5.3 colours by construction rather than by my
   transcription, they follow a future Bootstrap upgrade instead of silently drifting from it, and
   --bs-btn-color resolves per variant -- which is what gives amber black text and the other three
   white from one shared rule.

   If bootstrap5.3 ever stops loading, these vars go unset and the declarations become invalid at
   computed-value time -- the fills drop to transparent, which is loud. That is deliberate: a wrong-but-
   plausible colour would be worse than an obviously broken one. The harness asserts the resolved
   pixels, never merely that the rule is present. */
.btn-success,
.btn-danger,
.btn-primary,
.btn-warning {
  background-color: var(--bs-btn-bg);
  background-image: none;
  border-color: var(--bs-btn-border-color);
}
.btn-success:hover,
.btn-danger:hover,
.btn-primary:hover,
.btn-warning:hover,
a.btn-success:hover,
a.btn-danger:hover,
a.btn-primary:hover,
a.btn-warning:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  color: var(--bs-btn-hover-color);
}
.btn-success:active,
.btn-success.active,
.btn-danger:active,
.btn-danger.active,
.btn-primary:active,
.btn-primary.active,
.btn-warning:active,
.btn-warning.active {
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
.btn-success.disabled,
.btn-success[disabled],
.btn-danger.disabled,
.btn-danger[disabled],
.btn-primary.disabled,
.btn-primary[disabled],
.btn-warning.disabled,
.btn-warning[disabled] {
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
}
.btn-success,
.btn-success.active,
a.btn-success:link,
a.btn-success:visited,
a.btn-success:active,
a.btn-success:focus,
.btn-danger,
.btn-danger.active,
a.btn-danger:link,
a.btn-danger:visited,
a.btn-danger:active,
a.btn-danger:focus,
.btn-primary,
.btn-primary.active,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:active,
a.btn-primary:focus,
.btn-warning,
.btn-warning.active,
a.btn-warning:link,
a.btn-warning:visited,
a.btn-warning:active,
a.btn-warning:focus {
  color: var(--bs-btn-color);
  /* The shared block lifts white text off the old gradients with a dark shadow. Flat Bootstrap 5.3
     fills do not need it, and on amber's black label it is actively wrong. */
  text-shadow: none;
}
.btn-info {
  background-color: #49afcd;
  background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
  background-color: #2f96b4;
}
.btn-inverse {
  background-color: #414141;
  background-image: linear-gradient(to bottom, #555555, #222222);
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
  background-color: #222222;
}


/* ---------------------------------------------------------------------------
   5. COMPONENTS — alerts, labels, thumbnails, breadcrumb, accordion
   -------------------------------------------------------------------------*/
.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  border-radius: 4px;
}
.alert,
.alert-heading {
  color: #c09853;
}
.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 18px;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert-success,
.alert-success .alert-heading {
  color: #468847;
}
/* .alert-error was BS2's name for this; the two authenticated views that used
   it now say .alert-danger, so the alias is gone. (Views/Public still uses
   .alert-error, but _PublicLayout loads main.css only, never this file.) */
.alert-danger {
  background-color: #f2dede;
  border-color: #eed3d7;
}
.alert-danger,
.alert-danger .alert-heading {
  color: #b94a48;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-info,
.alert-info .alert-heading {
  color: #3a87ad;
}
.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}
.alert-block p + p {
  margin-top: 5px;
}

.label {
  padding: 2px 4px 3px;
  font-size: 11.05px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999999;
  border-radius: 3px;
}
.label:hover {
  color: #ffffff;
  text-decoration: none;
}
.label-important { background-color: #b94a48; }
.label-important:hover { background-color: #953b39; }
.label-warning { background-color: #f89406; }
.label-warning:hover { background-color: #c67605; }
.label-success { background-color: #468847; }
.label-success:hover { background-color: #356635; }
.label-info { background-color: #3a87ad; }
.label-info:hover { background-color: #2d6987; }

.thumbnails {
  margin-left: -20px;
  list-style: none;
}
.thumbnails:before,
.thumbnails:after {
  display: table;
  content: "";
}
.thumbnails:after {
  clear: both;
}
.thumbnails > li {
  float: left;
  margin: 0 0 18px 20px;
}
.thumbnail {
  display: block;
  padding: 4px;
  line-height: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
a.thumbnail:hover {
  border-color: #0088cc;
  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.thumbnail .caption {
  padding: 9px;
}

/* BS5 also defines .breadcrumb (flex, unstyled); restore the BS2 bar. */
.breadcrumb {
  display: block;
  padding: 7px 14px;
  margin: 0 0 18px;
  background-color: #fbfbfb;
  background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
  background-repeat: repeat-x;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #ffffff;
  list-style: none;
}
.breadcrumb li {
  display: inline-block;
  text-shadow: 0 1px 0 #ffffff;
}
.breadcrumb .divider {
  padding: 0 5px;
  color: #999999;
}
.breadcrumb .active a {
  color: #333333;
}

/* The BS2 .accordion / -group / -heading / -inner rules were removed in the
   Phase-2 sweep: no view uses those class names. Every accordion in the app
   is a jQuery UI accordion bound by element id (#accordion, #accordion2,
   #acdnmenu) with jQuery UI options, and it draws its own ui-accordion
   chrome. Bootstrap 5 registers no "accordion" jQuery plugin (its accordion
   is CSS plus collapse), so jQuery UI keeps that name uncontested. */


/* ---------------------------------------------------------------------------
   6. UTILITIES
   -------------------------------------------------------------------------*/
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.hide {
  display: none;
}
.show {
  display: block;
}
.invisible {
  visibility: hidden;
}
.muted {
  color: #999999;
}


/* ---------------------------------------------------------------------------
   7. BS5 NEUTRALIZERS — BS5 defaults that would restyle legacy markup
   -------------------------------------------------------------------------*/

/* DiggStylePagination renders <div class="pagination"><a>…</a></div>, styled
   by default.css. BS5's .pagination { display:flex } would re-lay it out and
   drop the right alignment. Keep the legacy block flow. */
div.pagination {
  display: block;
}

/* BS5 .badge on legacy badges (no bg-* utility) would paint white bold text
   with no background. Reset those; real BS5 badges (with bg-*) are untouched. */
.badge:not([class*="bg-"]) {
  color: inherit;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* A modal heading must not pick up the site's SECTION-heading chrome.

   NOTE this is a deliberate exception to the header's "Deliberately NOT covered here: .modal — every
   authenticated modal is a real BS5 modal since the flip." That is true of every modal WE render. It is
   not true of the plat page's "On Demand Plat Ready" dialog, whose markup is built at run time by
   PlatMap.js on mapcdn.totaland.com and is still Bootstrap 3. We cannot edit that script, so its
   heading has to be neutralised here.

   default.css styles bare `h4` with background-color #e1e4e9 and padding 3px 6px — that is the grey
   band used for section headings across the site. Bootstrap 3 markup writes its dialog heading as
   `<h4 class="modal-title">`, and Bootstrap 5 has no rule resetting it (its own markup uses `<h5>` and
   it assumes its reboot owns the element), so the band bled into the dialog: on the plat page's
   "On Demand Plat Ready" modal the title rendered as a grey bar with the heading inset in it.

   Scoped to .modal-title (0,1,0) so it beats the bare `h4` element selector (0,0,1) without
   !important, and without touching section headings anywhere else. */
.modal-title {
    background-color: transparent;
    padding: 0;
}