/* ======================================================================
   Bootstrap 3 compatibility layer for Bootstrap 5.

   StaffMIS's HTML is Bootstrap 3: 10,283 class attributes written out longhand
   across 196 files, with no shared field-rendering helper to change in one place.
   Bootstrap 5 deleted most of that vocabulary, so loading it alone leaves the app
   styled by a sheet that cannot see two thirds of its own markup.

   Rather than rewrite ~3,000 class occurrences, this teaches Bootstrap 5 to read
   the markup that is already there. Every rule below exists because a real count
   showed the idiom is in use, and the count is quoted on the rule. Load order
   matters: this file must come AFTER Bootstrap 5, because several of these
   override utilities that Bootstrap marks !important.

   This is deliberately a bridge, not a destination. Each block can be deleted the
   day its markup is migrated, and the counts say what deleting it will cost.
   ====================================================================== */

/* Layout root. #page-wrapper is offset by a fixed 208px sidebar, so Bootstrap 5's
   .container-fluid { width: 100% } overflows the viewport by exactly the sidebar
   width. Sizing it to its own box instead is the whole fix. */
#page-wrapper.container-fluid { width: auto; }

/* The form row (form-group 1,062 uses, control-label 454, form-horizontal 85).
   Bootstrap 5 removed .form-group entirely. StaffMIS uses it as a row holding a
   col-sm-2 label and a col-sm-10 control, so it has to behave like .row. */
/* :not(.row) throughout. 56 elements across 37 files carry BOTH form-group and row,
   using form-group only for its bottom margin while row does the actual layout. The
   form-field treatment below is wrong for those: stripping the column padding removes
   the grid gutter, so the content sat 12px left of every other element on the page,
   and the two-column pairing would squeeze a full-width layout row to half. The IMS
   page title was one -- it rendered flush against the sidebar. */
.form-group { margin-bottom: 1rem; }
.form-group:not(.row) { display: flex; flex-wrap: wrap; }
/* No :not(.row) on this one, deliberately: 19 of the 56 grid rows hold a real
   control-label, and this nudge only lines the label text up with the input
   beside it. That is wanted in a grid row too. The 170px width clamp in
   staffmis-ui.css DOES stay excluded -- those labels carry their own col-sm-*,
   and clamping a col-sm-3 to 170px would fight the grid. */
.form-group > .control-label { padding-top: calc(.375rem + 1px); margin-bottom: 0; }

/* Grid. Bootstrap 5's unprefixed tier IS Bootstrap 3's xs tier (col-xs-* 298
   uses), and the offset classes were renamed (col-*-offset-N 30 uses). */
.col-xs-1{flex:0 0 auto;width:8.33333333%}.col-xs-2{flex:0 0 auto;width:16.66666667%}
.col-xs-3{flex:0 0 auto;width:25%}.col-xs-4{flex:0 0 auto;width:33.33333333%}
.col-xs-5{flex:0 0 auto;width:41.66666667%}.col-xs-6{flex:0 0 auto;width:50%}
.col-xs-7{flex:0 0 auto;width:58.33333333%}.col-xs-8{flex:0 0 auto;width:66.66666667%}
.col-xs-9{flex:0 0 auto;width:75%}.col-xs-10{flex:0 0 auto;width:83.33333333%}
.col-xs-11{flex:0 0 auto;width:91.66666667%}.col-xs-12{flex:0 0 auto;width:100%}
.col-sm-offset-1{margin-left:8.33333333%}.col-sm-offset-2{margin-left:16.66666667%}
.col-sm-offset-3{margin-left:25%}.col-sm-offset-4{margin-left:33.33333333%}
.col-sm-offset-6{margin-left:50%}
.col-md-offset-2{margin-left:16.66666667%}.col-md-offset-3{margin-left:25%}

/* Renamed utilities (text-right 262, pull-right 53, pull-left 23, hidden-xs 18,
   visible-xs 17, img-responsive 3, center-block 1). */
.pull-right{float:right!important}.pull-left{float:left!important}
.text-right{text-align:right!important}.text-left{text-align:left!important}
/* These two now have ZERO uses in the repo, and they still cannot be deleted:
   the gitignored per-tenant skins use img-responsive 59 times and center-block 52.
   Those files are not in version control, so a repo count reads 0 while real
   tenants still depend on them. Retire these only after the skins are migrated
   or those tenants are moved onto app-ui. Run _tools/shim-coverage.sh, which
   reports the skins separately for exactly this reason. */
.img-responsive{display:block;max-width:100%;height:auto}
.center-block{display:block;margin-left:auto;margin-right:auto}
/* hidden-xs / hidden-sm hide ONLY in their range and otherwise leave display alone,
   as Bootstrap 3 did. Forcing display:block above 768px (the previous rule) overrode
   whatever the element was: a d-flex list became a vertical stack. */
@media (max-width:767.98px){.hidden-xs{display:none!important}}
@media (min-width:768px) and (max-width:991.98px){.hidden-sm{display:none!important}}
.visible-xs{display:block!important}
@media (min-width:768px){.visible-xs{display:none!important}}
/* The -block/-inline forms (visible-xs-block 2, visible-xs-inline 5, visible-sm 1,
   visible-sm-block 1). Missing before, so these showed at EVERY width: the Training
   Matrix printed its phone legend under the desktop one. */
.visible-xs-block,.visible-xs-inline,.visible-xs-inline-block,
.visible-sm,.visible-sm-block,.visible-sm-inline,.visible-sm-inline-block{display:none!important}
@media (max-width:767.98px){
    .visible-xs-block{display:block!important}
    .visible-xs-inline{display:inline!important}
    .visible-xs-inline-block{display:inline-block!important}
}
@media (min-width:768px) and (max-width:991.98px){
    .visible-sm,.visible-sm-block{display:block!important}
    .visible-sm-inline{display:inline!important}
    .visible-sm-inline-block{display:inline-block!important}
}

/* Form controls that were renamed (form-control-static 139, input-group-btn 41,
   help-block 38, input-group-addon 38, plus the checkbox and radio wrappers). */
.help-block{margin-top:.25rem;font-size:.875em;color:#6c757d}
.form-control-static{padding-top:.375rem;padding-bottom:.375rem;margin-bottom:0;line-height:1.5}
.input-group-addon{display:flex;align-items:center;padding:.375rem .75rem;
  background:#e9ecef;border:1px solid #dee2e6;border-radius:.375rem}
.input-group-btn{display:flex}
.checkbox, .radio { position:relative; display:block; margin-bottom:.5rem; }
.checkbox label, .radio label { margin-bottom:0; }

/* Components Bootstrap 5 dropped or renamed (well 57, label label-* 47,
   caret 37, thumbnail 24, btn-xs 14). */
.well{padding:1rem;background:#f8f9fa;border:1px solid #dee2e6;border-radius:.375rem;margin-bottom:1rem}
.thumbnail{display:block;padding:4px;background:#fff;border:1px solid #dee2e6;border-radius:.375rem}
.btn-xs{padding:.15rem .4rem;font-size:.75rem;border-radius:.25rem}
.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;
  border-top:4px dashed;border-right:4px solid transparent;border-left:4px solid transparent}
.label{display:inline-block;padding:.35em .65em;font-size:.75em;font-weight:700;
  line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;
  border-radius:.375rem;color:#fff}
.label-default{background:#6c757d}.label-primary{background:#0d6efd}
.label-success{background:#198754}.label-info{background:#0dcaf0;color:#000}
.label-warning{background:#ffc107;color:#000}.label-danger{background:#dc3545}
.close{float:right;font-size:1.25rem;font-weight:700;line-height:1;color:#000;
  opacity:.5;background:transparent;border:0;padding:0}
.close:hover{opacity:.75}
/* Modal headers. The app's markup puts .close FIRST and the title after it (Bootstrap 3
   order) and relies on float:right, but Bootstrap 5 makes .modal-header a flex row, where
   a float does nothing, so the x landed on the LEFT of every dialog title. Ordering it last
   and letting the title take the free space puts it back on the right with no markup
   change. This file only loads under BS5, so BS5_UI=false keeps Bootstrap 3's floats. */
.modal-header>.close{order:1;margin-left:auto}
.modal-header>.modal-title{flex:1 1 auto}

/* Panels are cards (panel 96, panel-default 96, panel-body 73, panel-heading 46 in
   the app, plus 1,560 more inside the 28 per-tenant skins, which is why this rule
   is what keeps those tenants working without touching their gitignored files). */
.panel{position:relative;display:flex;flex-direction:column;min-width:0;
  background:#fff;border:1px solid rgba(0,0,0,.175);border-radius:.375rem;margin-bottom:1rem}
.panel-heading{padding:.5rem 1rem;background:rgba(0,0,0,.03);
  border-bottom:1px solid rgba(0,0,0,.175);border-radius:.375rem .375rem 0 0}
.panel-body{padding:1rem}
.panel-footer{padding:.5rem 1rem;background:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.175)}

/* Tabs (nav nav-tabs 48, nav nav-pills 4). Bootstrap 5 styles .nav-link on the
   anchor and .nav-item on the li; Bootstrap 3 markup has neither, so without this
   every tabbed screen would render its tabs as bare links. */
.nav-tabs > li { margin-bottom: -1px; }
.nav-tabs > li > a {
  display:block; padding:.5rem 1rem; border:1px solid transparent;
  border-top-left-radius:.375rem; border-top-right-radius:.375rem;
  color:#0d6efd; text-decoration:none;
}
.nav-tabs > li > a:hover { border-color:#e9ecef #e9ecef #dee2e6; }
.nav-tabs > li.active > a { color:#495057; background:#fff; border-color:#dee2e6 #dee2e6 #fff; }
.nav-pills > li > a { display:block; padding:.5rem 1rem; border-radius:.375rem; text-decoration:none; }
.nav-pills > li.active > a { color:#fff; background:#0d6efd; }

/* Buttons. .btn-default was Bootstrap 3's neutral button (520 uses) and has no
   Bootstrap 5 equivalent that looks the same; .btn-secondary is solid grey. */
.btn-default{color:#212529;background:#fff;border-color:#dee2e6}
.btn-default:hover{color:#212529;background:#f8f9fa;border-color:#dee2e6}

/* THE SILENT ONE. StaffMIS defines its own spacing scale in basic_stylesheet.css
   on a 7px step (.mb-1 is 14px). Bootstrap 5 claims the same names on a 4px step
   and marks them !important, so without this roughly 1,105 margins would quietly
   change and several would vanish, with nothing erroring anywhere. Restated after
   Bootstrap so the application's own scale wins. */
.mt-05{margin-top:7px!important}.mr-05{margin-right:7px!important}
.mb-05{margin-bottom:7px!important}.ml-05{margin-left:7px!important}
.mt-1{margin-top:14px!important}.mr-1{margin-right:14px!important}
.mb-1{margin-bottom:14px!important}.ml-1{margin-left:14px!important}
.mt-15{margin-top:21px!important}.mr-15{margin-right:21px!important}
.mb-15{margin-bottom:21px!important}.ml-15{margin-left:21px!important}
.pt-05{padding-top:7px!important}.pb-05{padding-bottom:7px!important}
.pt-1{padding-top:14px!important}.pb-1{padding-bottom:14px!important}
.pl-1{padding-left:14px!important}.pr-1{padding-right:14px!important}

/* Column ordering: push and pull (81 uses across 34 files).

   Bootstrap 5 removed these outright, and unlike the classes it merely RENAMED they
   fail silently: the columns still size correctly, they just stop moving, so a row
   authored as "list on the left, filters on the right" quietly renders in markup
   order instead. Nothing errors and nothing looks broken -- it is simply the wrong
   way round, which is the hardest kind of regression to notice. The Communications
   page is one: its filter column is col-sm-push-8 and its message list col-sm-pull-4.

   Reimplemented the way Bootstrap 3 did it, with relative offsets. Breakpoints
   follow BOOTSTRAP 5's tiers rather than Bootstrap 3's, deliberately: the column
   WIDTHS beside these are Bootstrap 5's own col-sm-*, so matching its breakpoints
   keeps a row's sizing and its shifting in step. Using Bootstrap 3's 768px here
   would leave columns sized but unshifted between 576 and 767px, which is worse
   than either convention on its own. */
.row > [class*="col-"] { position: relative; }

.col-xs-push-1{left:8.33333333%}.col-xs-pull-1{right:8.33333333%}
.col-xs-push-2{left:16.66666667%}.col-xs-pull-2{right:16.66666667%}
.col-xs-push-3{left:25%}.col-xs-pull-3{right:25%}
.col-xs-push-4{left:33.33333333%}.col-xs-pull-4{right:33.33333333%}
.col-xs-push-5{left:41.66666667%}.col-xs-pull-5{right:41.66666667%}
.col-xs-push-6{left:50%}.col-xs-pull-6{right:50%}
.col-xs-push-7{left:58.33333333%}.col-xs-pull-7{right:58.33333333%}
.col-xs-push-8{left:66.66666667%}.col-xs-pull-8{right:66.66666667%}
.col-xs-push-9{left:75%}.col-xs-pull-9{right:75%}
.col-xs-push-10{left:83.33333333%}.col-xs-pull-10{right:83.33333333%}
.col-xs-push-11{left:91.66666667%}.col-xs-pull-11{right:91.66666667%}
.col-xs-push-12{left:100%}.col-xs-pull-12{right:100%}
.col-xs-push-0{left:auto}.col-xs-pull-0{right:auto}

@media (min-width: 576px) {
    .col-sm-push-1{left:8.33333333%}.col-sm-pull-1{right:8.33333333%}
    .col-sm-push-2{left:16.66666667%}.col-sm-pull-2{right:16.66666667%}
    .col-sm-push-3{left:25%}.col-sm-pull-3{right:25%}
    .col-sm-push-4{left:33.33333333%}.col-sm-pull-4{right:33.33333333%}
    .col-sm-push-5{left:41.66666667%}.col-sm-pull-5{right:41.66666667%}
    .col-sm-push-6{left:50%}.col-sm-pull-6{right:50%}
    .col-sm-push-7{left:58.33333333%}.col-sm-pull-7{right:58.33333333%}
    .col-sm-push-8{left:66.66666667%}.col-sm-pull-8{right:66.66666667%}
    .col-sm-push-9{left:75%}.col-sm-pull-9{right:75%}
    .col-sm-push-10{left:83.33333333%}.col-sm-pull-10{right:83.33333333%}
    .col-sm-push-11{left:91.66666667%}.col-sm-pull-11{right:91.66666667%}
    .col-sm-push-12{left:100%}.col-sm-pull-12{right:100%}
    .col-sm-push-0{left:auto}.col-sm-pull-0{right:auto}
}

@media (min-width: 768px) {
    .col-md-push-1{left:8.33333333%}.col-md-pull-1{right:8.33333333%}
    .col-md-push-2{left:16.66666667%}.col-md-pull-2{right:16.66666667%}
    .col-md-push-3{left:25%}.col-md-pull-3{right:25%}
    .col-md-push-4{left:33.33333333%}.col-md-pull-4{right:33.33333333%}
    .col-md-push-5{left:41.66666667%}.col-md-pull-5{right:41.66666667%}
    .col-md-push-6{left:50%}.col-md-pull-6{right:50%}
    .col-md-push-7{left:58.33333333%}.col-md-pull-7{right:58.33333333%}
    .col-md-push-8{left:66.66666667%}.col-md-pull-8{right:66.66666667%}
    .col-md-push-9{left:75%}.col-md-pull-9{right:75%}
    .col-md-push-10{left:83.33333333%}.col-md-pull-10{right:83.33333333%}
    .col-md-push-11{left:91.66666667%}.col-md-pull-11{right:91.66666667%}
    .col-md-push-12{left:100%}.col-md-pull-12{right:100%}
    .col-md-push-0{left:auto}.col-md-pull-0{right:auto}
}

@media (min-width: 992px) {
    .col-lg-push-1{left:8.33333333%}.col-lg-pull-1{right:8.33333333%}
    .col-lg-push-2{left:16.66666667%}.col-lg-pull-2{right:16.66666667%}
    .col-lg-push-3{left:25%}.col-lg-pull-3{right:25%}
    .col-lg-push-4{left:33.33333333%}.col-lg-pull-4{right:33.33333333%}
    .col-lg-push-5{left:41.66666667%}.col-lg-pull-5{right:41.66666667%}
    .col-lg-push-6{left:50%}.col-lg-pull-6{right:50%}
    .col-lg-push-7{left:58.33333333%}.col-lg-pull-7{right:58.33333333%}
    .col-lg-push-8{left:66.66666667%}.col-lg-pull-8{right:66.66666667%}
    .col-lg-push-9{left:75%}.col-lg-pull-9{right:75%}
    .col-lg-push-10{left:83.33333333%}.col-lg-pull-10{right:83.33333333%}
    .col-lg-push-11{left:91.66666667%}.col-lg-pull-11{right:91.66666667%}
    .col-lg-push-12{left:100%}.col-lg-pull-12{right:100%}
    .col-lg-push-0{left:auto}.col-lg-pull-0{right:auto}
}

/* .hidden (12 uses across 9 files).

   Bootstrap 3's blunt display:none utility. Bootstrap 5 dropped it, and nothing else
   in the app defines it, so every element marked hidden had quietly become VISIBLE.
   Same failure shape as push/pull: no error, nothing looks broken, the page just
   shows something it was never meant to. The Communications search box was one --
   it appeared only because this class stopped working.

   Restored here so the other uses behave as their authors intended. Where something
   marked hidden SHOULD be visible, the fix is to remove the class from the markup,
   which is what the Communications search now does, rather than leaving a class in
   place that means nothing. */
.hidden { display: none !important; }

/* Bootstrap 3 hid the radio or checkbox inside a data-toggle="buttons" group, so the
   .btn label IS the control. Bootstrap 5 has no such rule, so a round radio showed
   inside each Yes / No / n/a button (task steps, shift opportunities). This is the
   Bootstrap 3 rule as it was: the input stays focusable and a click on the label
   still checks it. */
[data-toggle="buttons"]>.btn input[type="radio"],
[data-toggle="buttons"]>.btn input[type="checkbox"]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}