/* ============================================================================
   Bootstrap 3 "look" compatibility layer for Bootstrap 5
   ----------------------------------------------------------------------------
   Re-applies Bootstrap 3.4.1's visual characteristics (compact 14px sizing,
   button/form/table density, BS3 color palette, 4px radii) on top of the
   Bootstrap 5 framework, so the upgraded UI resembles the previous (BS3) look.

   MUST be loaded AFTER bootstrap.css in every style bundle (so it overrides).
   App-specific brand overrides that load later (e.g. EmployeeDashboard _Layout
   inline styles) still win over this layer.
   ============================================================================ */

/* ---- Base typography (BS3 was 14px / 1.428..; BS5 is 16px) ---- */
body {
    font-size: 14px;
    line-height: 1.42857143;
}

.btn,
.form-control,
.form-select,
.input-group-text,
.dropdown-menu,
.table,
.nav,
.badge,
.alert,
label,
.col-form-label {
    font-size: 14px;
}

/* ---- BS3 made labels bold by default; BS5 renders them normal weight.
   Restore bold so field labels are distinguishable from values (QA bugs 33, 39,
   42, 46-48, 52, 58-60). Checkboxes/radios keep normal weight. ---- */
label,
.control-label,
.col-form-label,
.form-label {
    font-weight: 700;
    margin-bottom: 5px;
}

.form-check-label {
    font-weight: 400;
}

/* ---- Removed-in-v4 utility classes the app still uses ---- */
.hidden,
.hide {
    display: none !important;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

/* ---- Buttons: BS3 sizing + palette ---- */
.btn {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
}

.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; }
.btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; }

/* .btn-default (mapped to .btn-secondary) — BS3 white/bordered button */
.btn-secondary { color: #333; background-color: #fff; border-color: #ccc; --bs-btn-disabled-color: #333; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: #ccc; }
.btn-secondary:hover, .btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
    color: #333; background-color: #e6e6e6; border-color: #adadad; box-shadow: none;
}

/* BS5's own .btn:disabled rule (higher specificity than .btn-*) reads the
   --bs-btn-disabled-* custom properties, not background-color/border-color, so
   each variant below must set them too or disabled buttons fall back to BS5's
   default palette instead of the BS3 color faded via opacity. */
.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #337ab7; --bs-btn-disabled-border-color: #2e6da4; }
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active { background-color: #286090; border-color: #204d74; }

.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #5cb85c; --bs-btn-disabled-border-color: #4cae4c; }
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active { background-color: #449d44; border-color: #398439; }

.btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #5bc0de; --bs-btn-disabled-border-color: #46b8da; }
.btn-info:hover, .btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active { background-color: #31b0d5; border-color: #269abc; }

.btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #f0ad4e; --bs-btn-disabled-border-color: #eea236; }
.btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active { background-color: #ec971f; border-color: #d58512; }

.btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #d9534f; --bs-btn-disabled-border-color: #d43f3a; }
.btn-danger:hover, .btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active { background-color: #c9302c; border-color: #ac2925; }

/* ---- Form controls: BS3 height/padding/border ---- */
.form-control,
.form-select {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

textarea.form-control { height: auto; }

/* File inputs: BS5 styles them via ::file-selector-button (BS3's .btn-file is
   gone), but the fixed 34px .form-control height above clips/misaligns that
   inner button, which uses vertical padding + negative margins (QA bugs 26, 63:
   "Choose file" button broken on Tuition Application Details and PGP Encryption
   Manage Company). Let file inputs size naturally and restore a BS3-ish button. */
.form-control[type="file"] { height: auto; }
.form-control[type="file"]::file-selector-button {
    padding: 6px 12px;
    margin: -6px 12px -6px -12px;
    color: #333;
    background-color: #fff;
    border: 0;
    border-right: 1px solid #ccc;
}

/* BS5's bootstrap.css styles :disabled form controls grey (var(--bs-secondary-bg))
   but ships no equivalent rule for [readonly] -- BS3's readonly grey-out was
   never ported. Banner Message, Instruction, Attestation, Company Terms, Tuition
   Approval/Denial Reason Code, Tuition Form "Form Type", and the Manager Approval
   Form Instruction upload all use readonly fields and rendered as plain white
   boxes indistinguishable from editable ones (QA bug 51). */
/* [readonly] attribute selectors only -- NOT :read-only. <select> doesn't support
   the readonly attribute at all, so per spec it can never be :read-write and the
   :read-only pseudo-class matches EVERY non-disabled <select> in the app (a known
   CSS gotcha), which greyed out every plain dropdown site-wide (regression this
   introduced, caught via Manage Program Access screenshot). */
.form-control[readonly],
.form-select[readonly],
textarea[readonly] {
    background-color: #eee;
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.form-control-sm { height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 3px; }
.form-control-lg { height: 46px; padding: 10px 16px; font-size: 18px; border-radius: 6px; }

.input-group-text {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ---- Tables: BS3 density/borders ---- */
.table > :not(caption) > * > * {
    padding: 8px;
    line-height: 1.42857143;
    border-bottom-width: 0;
}

/* Row separators on body cells only. thead th is intentionally excluded so there
   is no line ABOVE the column headers (the header keeps just its 2px bottom rule
   below); BS5's default top border there read as an extra line above the table. */
.table:not(.table-borderless) > tbody > tr > td,
.table:not(.table-borderless) > tbody > tr > th {
    border-top: 1px solid #ddd;
    box-shadow: none;
}

/* The border-reset above also erases Bootstrap 5's zebra striping, which is
   painted via that same box-shadow property -- .table-striped > tbody >
   tr:nth-of-type(odd) > * sets an inset box-shadow, not background-color -- so
   the blanket box-shadow:none reset (higher specificity, loads later) silently
   strips striping from every .table-striped table in the app (QA bug 74: Bargain
   Wage tables, Application/Transaction History). Re-apply it, scoped to
   .table-striped rows only, at higher specificity than the reset above.

   Color: hardcoded instead of `var(--bs-table-striped-bg, ...)` -- Bootstrap 5's
   own .table rule already DEFINES that variable (rgba(var(--bs-emphasis-color-rgb),
   0.05), which resolves to ~5% near-black), so our fallback value never actually
   applied and every striped table rendered visibly darker than BS3's original
   #f9f9f9-on-white stripe (~2.3% black) (QA: Payment Holds table zebra too dark). */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.025);
}

/* BS3 drew a heavier 2px rule under the column headers to separate them from the
   data (the reset above zeroed all bottom borders, so restore it just for thead).
   Without it the results table runs straight into the form above with no visual
   break (e.g. under "Save Report Schedule"). */
.table > thead > tr > th {
    border-bottom: 2px solid #ddd;
    vertical-align: bottom;
}

/* A results table that sits right after a form (submit button) needs breathing
   room above it — BS3 had it, BS5's zero form/table top margins remove it, so the
   table butts up against the button (e.g. "Save Report Schedule" -> results
   table). Add the gap for any table directly following a form. */
/* The direct-sibling selector above only fires when .table is the <form>'s
   literal next sibling. Most search toolbars are a bare .row/.form-inline div,
   not a <form>, and/or the table is wrapped in .table-responsive -- so the gap
   never applies on Queue pages, Tuition Modifications, or Employee Details
   (QA bug 68). Cover both variants for all three toolbar/wrapper shapes. */
form + .table,
form + .table-responsive,
.row + .table,
.row + .table-responsive,
.form-inline + .table,
.form-inline + .table-responsive {
    margin-top: 20px;
}

.table-sm > :not(caption) > * > * { padding: 5px; }

/* ---- Dropdowns + cards: BS3 sizing/radius ---- */
.dropdown-menu { font-size: 14px; border-radius: 4px; }
.dropdown-item { padding: 3px 20px; }
.card { border-radius: 4px; }
.card-header { padding: 10px 15px; }
.card-body { padding: 15px; }

/* ---- Labels -> badges (BS3 .label sizing) ---- */
.badge {
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    border-radius: 0.25em;
}

/* ---- Headings: BS3 sizes (BS5 headings are larger) ---- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 500;
    line-height: 1.1;
}

h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; --bs-gutter-y: 20px; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; --bs-gutter-y: 10px;  }

h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

/* Inline <small>/.small inside a heading (e.g. "Reports - <small>As of ...</small>").
   BS3 rendered these muted, smaller and normal-weight; BS5 dropped the muted color
   and uses a larger 0.875em. Restore the BS3 look globally so every page-header
   subtitle matches. */
h1 small, h1 .small, h2 small, h2 .small, h3 small, h3 .small,
.h1 small, .h1 .small, .h2 small, .h2 .small, .h3 small, .h3 .small,
h4 small, h4 .small, h5 small, h5 .small, h6 small, h6 .small,
.h4 small, .h4 .small, .h5 small, .h5 .small, .h6 small, .h6 .small {
    font-weight: 400;
    line-height: 1;
    color: #777;
}
h1 small, h1 .small, h2 small, h2 .small, h3 small, h3 .small,
.h1 small, .h1 .small, .h2 small, .h2 .small, .h3 small, .h3 .small { font-size: 65%; }
h4 small, h4 .small, h5 small, h5 .small, h6 small, h6 .small,
.h4 small, .h4 .small, .h5 small, .h5 .small, .h6 small, .h6 .small { font-size: 75%; }

p { margin: 0 0 10px; }
.lead { font-size: 16px; }

/* ---- Modals: BS3 sizing / layout / padding ---- */
/* font-family pinned for the same reason .modal-body pins font-size below:
   on siteCss pages main.css's `body { font-family: museo-sans-rounded }` loads
   after this file and leaks into modals; BS3 modals rendered in the default
   "Helvetica Neue" stack (QA bug 21, Session Expired modal "font style changed"). */
.modal-content {
    border-radius: 6px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Widths: BS3 defaults (BS5 is narrower). Crucially, honor legacy inline
   style="width:NN%" — BS5's .modal-dialog max-width:500px otherwise caps it,
   which is why wide modals rendered narrow after the upgrade. */
.modal-dialog { max-width: 600px; }
.modal-lg { max-width: 900px; }
.modal-sm { max-width: 300px; }
.modal-dialog[style*="width"] { max-width: none; }

/* Header: BS3 layout — title on the left, close (×) floated to the top-right
   (BS5 flex re-orders them because the close button precedes the title). */
.modal-header { display: block; padding: 15px; border-bottom: 1px solid #e5e5e5; }
.modal-header .btn-close,
.modal-header .close { float: right; margin: 0; }

/* Modal close (×): BS3 used <button class="close">&times;</button>; the app
   migrated to BS5 <button class="btn-close"> which draws the × via a background
   SVG. Re-declare it here (compat loads after bootstrap.css) so the × renders
   even if a stale Bootstrap 3 bootstrap.css — which has no .btn-close rule — is
   still cached (QA #19715: modal × invisible / empty box). */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25em;
    opacity: 0.5;
}

.btn-close:hover { color: #000; opacity: 0.75; }

/* Legacy .close (BS3) still used by any un-migrated modal: keep the × glyph visible. */
.modal-header .close {
    padding: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    background: transparent;
    border: 0;
    opacity: 0.5;
}
.modal-header .close:hover { opacity: 0.75; }
.modal-title { margin: 0; line-height: 1.42857143; font-size: 18px; }

/* font-size explicit, not just inherited from body: on pages using the siteCss
   bundle (e.g. Account/Login's Session Expired modal), main.css's own
   `body { font-size: 1.8em }` (unrelated to this migration -- it predates it --
   but still loads after this file in that bundle) can win the cascade and blow
   up any modal text that doesn't set its own size, same as .modal-title already
   does just above (QA bug 21). */
.modal-body { padding: 15px; font-size: 14px; }
.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; }

/* Inputs span the modal width (override the admin "input{max-width:280px}" cap). */
.modal .form-control,
.modal .form-select,
.modal input,
.modal select,
.modal textarea { max-width: 100%; }

/* ---- Menu / navbar spacing: BS3 nav-link padding (colors stay app-specific) ----
   display:block so legacy plain <li><a> links (no .nav-link) match the block
   .nav-link dropdown toggles — otherwise the plain links stay inline and sit a
   few px higher, misaligning the menu row (QA #19715, admin top nav). */
.navbar .navbar-nav > li > a,
.navbar .navbar-nav .nav-link {
    display: block;
    padding: 15px;
    line-height: 20px;
}

.navbar .navbar-text { padding: 15px; }
.navbar .dropdown-menu { font-size: 14px; }

/* _LoginPartial wraps its `.ms-auto` nav in a <form id="logoutForm">, so the
   FORM (not the <ul>) is the flex child of the navbar and .ms-auto on the inner
   ul has nothing to push against. Push the form itself so Settings/Log off sit
   at the far right (QA #19715, admin top nav). */
.navbar #logoutForm {
    margin-left: auto;
}

/* ---- Unobtrusive validation error text ------------------------------------
   jquery.validate.unobtrusive tags invalid inputs with .input-validation-error
   and message spans with .field-validation-error. A prior pass here added a
   red BORDER on .input-validation-error, on the premise that "BS3 styled these
   with a red border" -- checked every pre-migration CSS file and none contain
   any such rule; BS3 only ever showed the red error TEXT below the field, and
   visual comparison against the true baseline confirms it (invalid inputs keep
   their default border). Removed; only the text-color rule below is real. */

/* font-size !important: these messages also carry .text-danger, and
   be-updates.css `.text-danger { font-size: .7em }` (loaded later) would
   otherwise win and blow them up against the large public-site body font. */
.field-validation-error,
.field-validation-error span {
    color: #dc3545;
    font-size: 14px !important;
}

.validation-summary-errors {
    color: #dc3545;
    font-size: 14px !important;
}

.validation-summary-errors ul { margin-bottom: 0; }
.validation-summary-errors li { font-size: 14px !important; }

/* ---- Native <select class="form-control"> caret ---------------------------
   Bootstrap 5 only draws the dropdown chevron on .form-select; a plain
   <select class="form-control"> (still used across ~65 admin views) renders as
   a caret-less text box (QA #19715: "dropdowns render as plain text boxes,
   caret/chevron missing"). Re-apply BS5's .form-select appearance to native
   selects so they read as selectable without renaming every declaration.
   Excludes multi/list selects (they render as a list, not a dropdown) and
   plugin-enhanced selects (Chosen / bootstrap-select hide the native element). */
select.form-control:not([multiple]):not([size]):not(.selectpicker):not(.chosen-select) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* ---- .form-inline (removed in Bootstrap 4/5) ------------------------------
   ~42 admin views wrap inline toolbars/filters in a .form-inline form. Without
   it, BS5's block-level, width:100% form controls stack full-width (QA #19715:
   "controls stretched to full width ... toolbars now render as tall, full-width
   stacked elements"). Restore the BS3 inline row: a wrapping flex row whose
   controls size to content. */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.25rem;
}

.form-inline .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
}

.form-inline .form-control,
.form-inline .form-select,
.form-inline input,
.form-inline select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-inline label,
.form-inline .col-form-label {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.form-inline .btn {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

/* An <hr> inside a form-inline toolbar was a BS3 row separator: block-level, it
   ended one logical row and started the next (e.g. Custom Report "Template" row
   vs "Search" row). In a flex row it becomes an inline item and stops breaking,
   collapsing the toolbar onto one line. Force it full-width so it spans the row
   and pushes the following controls to the next line, as in production. */
.form-inline > hr {
    flex: 0 0 100%;
    width: 100%;
    margin: 0.5rem 0;
}

/* <br> elements used as line-break sentinels between toolbar controls and
   checkbox rows (a BS3 idiom) become zero-height flex items and stop breaking
   lines. Force full-width so subsequent items wrap to the next row. */
.form-inline > br {
    flex: 0 0 100%;
}

/* Div wrappers whose immediate child is a .row (checkbox rows, standalone group
   rows) were display:block in BS3 and always started a new line. In the flex
   row they shrink to content-width and flow inline with adjacent controls.
   Force full-width to restore the block-level line-break behavior.
   Deliberately narrow: only matches wrapper divs → .row, not inline form-control
   wrappers (div.mb-3 → select/input) which have no .row child. */
.form-inline > div:has(> .row) {
    flex: 0 0 100%;
}

/* A <p> inside a form-inline toolbar (e.g. the "Make sure you have saved..."
   instructions before the CompanyEmailTemplates "Test Templates" field) was a
   BS3 block element: it always started its own line, pushing the controls that
   followed it down to the next line. In our flex row it becomes an inline item
   instead and shares a line with any control short enough to fit next to it.
   Force it full-width so it still breaks onto its own line, as in production. */
.form-inline > p {
    flex: 0 0 100%;
    width: 100%;
}

/* Empty unobtrusive-validation spans between inline controls add width and can
   push the next control (e.g. the Search button) onto a new line. */
.form-inline .text-danger:empty,
.form-inline .field-validation-error:empty,
.form-inline .field-validation-valid:empty {
    display: none;
}

/* Plain empty <span> spacers between controls (a BS3/4 idiom for inline spacing)
   become zero-width flex items in our restored form-inline flex row, but they
   still attract a full gap() on each side — doubling the visual space between
   adjacent controls. Hide them so only the gap between real children applies. */
.form-inline > span:empty {
    display: none;
}

.form-inline .input-group { width: auto; }

/* Toolbar field wrappers use .mb-3 (margin-bottom:1rem). Inside a form-inline
   flex row (align-items:center) that extra bottom margin lifts the wrapped
   controls ~8px above the bare buttons (which have no margin), breaking the
   shared baseline (QA alignment report: General Report "Change Date" row, and
   the Custom Report toolbar stagger). Zero it for DIRECT toolbar children only;
   nested .mb-3 (e.g. the field-selection cards in a column) keep their spacing. */
.form-inline > .mb-3 { margin-bottom: 0 !important; }

/* Same fix, one level deeper: a .form-inline whose toolbar is wrapped in a .row
   (see ".form-inline > .row" below) has its field wrapper as .row > .mb-3, not
   a direct .form-inline child, so the rule above doesn't reach it. In BS3's
   block/float layout this trailing margin collapsed away against the next
   sibling; BS5's .row is a flex formatting context, which never collapses
   margins across its boundary, so the full 1rem now shows as extra gap before
   the next row/toolbar (e.g. ManageEducationalPayees: Search row sits ~1rem
   further from the Add/Export row than in production). Zero it here too. */
.form-inline > .row > .mb-3 { margin-bottom: 0 !important; }

/* Some .form-inline forms wrap their controls in a .row/.col grid. Our flex on
   .form-inline would otherwise shrink that .row to fit-content (collapsing the
   columns and stacking the controls). Force a nested .row to full width so the
   grid lays out normally and the controls sit inline within their columns. */
.form-inline > .row {
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Bootstrap 5 grid sets `.row > * { width: 100% }` on every direct child of a
   row. Legacy markup places bare buttons/inputs (Search, Add, Export) directly
   in a .row with no .col wrapper, so they render as full-width bars. Keep such
   bare buttons content-width and inline (QA #19715, e.g. ManageEducationalPayees).

   Also reset the cross-axis: `.row`'s default `align-items: stretch` stretches
   every direct flex child -- including these bare buttons -- to the height of
   the tallest sibling column in the row (e.g. a `.col` with a label + input +
   validation-message span is taller than the button's own content height). BS3
   buttons never stretched like this; they kept their natural button height
   regardless of neighboring column height. Pin them back to content height. */
.row > .btn,
.row > input[type="submit"],
.row > input[type="button"],
.row > button {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    align-self: center;
}

/* .form-inline is also used as a generic form class on some modal forms (e.g.
   the Approval Reason modal), not just inline toolbars. Inside a modal keep it a
   normal block form so controls are full-width and the .modal-footer sits on its
   own row — don't apply the inline-toolbar flex (QA #19715). */
.modal .form-inline {
    display: block;
    gap: 0;
}

.modal .form-inline .form-control,
.modal .form-inline .form-select,
.modal .form-inline input,
.modal .form-inline select,
.modal .form-inline textarea {
    display: block;
    width: 100%;
}

/* .input-group uses flex — the 100% width above must not apply inside it */
.modal .form-inline .input-group .form-control,
.modal .form-inline .input-group input,
.modal .form-inline .input-group select,
.modal .form-inline .input-group textarea {
    width: 1%;
    flex: 1 1 auto;
    min-width: 0;
}

/* checkboxes and radios must stay inline — the block/100% override above
   would otherwise push the box onto its own line above the label text */
.modal .form-inline input[type="checkbox"],
.modal .form-inline input[type="radio"] {
    display: inline-block;
    width: auto;
}

/* ---- .input-group-addon (renamed to .input-group-text in v4/5) ------------ */
.input-group-addon {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    white-space: nowrap;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* ---- .panel (removed in v4, replaced by .card) ---------------------------- */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-body { padding: 15px; }

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

.panel-title { margin-top: 0; margin-bottom: 0; font-size: 16px; }

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

.panel-default { border-color: #ddd; }
.panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; }
.panel-primary { border-color: #337ab7; }
.panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; }
.panel-info { border-color: #bce8f1; }
.panel-info > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.panel-success { border-color: #d6e9c6; }
.panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.panel-warning { border-color: #faebcc; }
.panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.panel-danger { border-color: #ebccd1; }
.panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

/* ---- .well (removed in v4) ------------------------------------------------- */
.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, 0.05);
}

.well-sm { padding: 9px; border-radius: 3px; }
.well-lg { padding: 24px; border-radius: 6px; }

/* ---- .dl-horizontal (removed in v4) ----------------------------------------
   BS5 has no .dl-horizontal, so <dt>/<dd> render as plain stacked block
   elements instead of a right-aligned label next to its value on the same
   line (e.g. Admin/ApiKeyDetails, Manage/Index). Restoring BS3 3.4.1's float
   layout puts them back on one line. ---------------------------------------- */
.dl-horizontal dd::after {
    display: table;
    content: " ";
    clear: both;
}

@media (min-width: 768px) {
    .dl-horizontal dt {
        float: left;
        width: 160px;
        overflow: hidden;
        clear: left;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dl-horizontal dd {
        margin-left: 180px;
    }
}

/* ---- .nav-tabs / .nav-pills legacy markup (QA #19715: tabs collapse into
   run-together plain-text links) ---------------------------------------------
   ~22 admin views still use Bootstrap 3 tab markup:
       <ul class="nav nav-tabs"><li class="active"><a data-bs-toggle="tab">...
   i.e. the <li> has no .nav-item and the <a> has no .nav-link, and the active
   state sits on the <li> (BS3) not the .nav-link (BS5). Bootstrap 5 styles only
   .nav-link, so these anchors get no padding/border/tab shape and the active
   tab isn't highlighted — they render as unstyled inline links. Tab *switching*
   still works (the views already use data-bs-toggle="tab"); only the look is
   missing. Re-apply the BS3 nav/tab appearance to the `> li > a` structure.
   Scoped :not(.nav-link) so any view already migrated to BS5 markup (e.g.
   Impersonate.cshtml) is left to Bootstrap 5's own rules. */
.nav-tabs > li > a:not(.nav-link),
.nav-pills > li > a:not(.nav-link) {
    position: relative;
    display: block;
    padding: 10px 15px;
    color: #337ab7;
    text-decoration: none;
}

.nav-tabs > li > a:not(.nav-link):hover,
.nav-tabs > li > a:not(.nav-link):focus,
.nav-pills > li > a:not(.nav-link):hover,
.nav-pills > li > a:not(.nav-link):focus {
    text-decoration: none;
    background-color: #eee;
}

/* Tabs: BS3 tab shape + bottom-border overlap */
.nav-tabs { border-bottom: 1px solid #ddd; }

.nav-tabs > li { position: relative; margin-bottom: -1px; }

.nav-tabs > li > a:not(.nav-link) {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:not(.nav-link):hover {
    border-color: #eee #eee #ddd;
}

/* Active tab: BS3 put .active on the <li>; BS5 (and our bootstrap5-ui-init
   sync) put it on the <a> trigger. Match both so the active tab styles
   correctly whichever element carries .active. */
.nav-tabs > li.active > a:not(.nav-link),
.nav-tabs > li.active > a:not(.nav-link):hover,
.nav-tabs > li.active > a:not(.nav-link):focus,
.nav-tabs > li > a.active:not(.nav-link),
.nav-tabs > li > a.active:not(.nav-link):hover,
.nav-tabs > li > a.active:not(.nav-link):focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

/* Pills */
.nav-pills > li > a:not(.nav-link) { border-radius: 4px; }

.nav-pills > li.active > a:not(.nav-link),
.nav-pills > li.active > a:not(.nav-link):hover,
.nav-pills > li.active > a:not(.nav-link):focus,
.nav-pills > li > a.active:not(.nav-link),
.nav-pills > li > a.active:not(.nav-link):hover,
.nav-pills > li > a.active:not(.nav-link):focus {
    color: #fff;
    background-color: #337ab7;
}

/* Vertical / "side" tabs: BS3 .nav-stacked. Under BS5's flex .nav, stack the
   items in a column so they don't render as a run-together horizontal row. */
.nav-stacked { flex-direction: column; }
.nav-stacked > li { float: none; margin-bottom: 2px; }
.nav-tabs.nav-stacked { border-bottom: none; }

/* Initially-active fade tab-panes marked with the Bootstrap 3 `.in` class
   (renamed to `.show` in BS5). `.active` makes them display:block but `.fade`
   without `.show` leaves opacity:0, so the first tab's content is invisible on
   page load until you switch tabs (QA #19715, e.g. ManageCompanyPrograms). Treat
   BS3 `.in` as shown. (display for inactive panes is still governed by .active.) */
.tab-pane.fade.in {
    opacity: 1;
}

/* Same BS3 `.in` -> BS5 `.show` rename, but for .collapse panels rather than
   fade tab-panes. BS5's own bootstrap.css hides ANY .collapse unless it also
   carries .show (`.collapse:not(.show) { display: none; }`); markup still
   marking an initially-open accordion panel with the old `.in` class (e.g.
   Data Conversions' field-checkbox panel) has no `.show`, so the whole panel
   renders as blank space (QA bug 31: "broken layout and functionality").

   Excludes <tr>: expandable detail ROWS also carry the BS3 `.in` (e.g. the
   Impersonate tuition tables' `<tr class="collapse accordion-N show in">`).
   `display: block` on a table row drops it out of the table's row model — the
   browser re-wraps its cells in an anonymous table, so the real columns stop
   aligning with the header and overflow the card. Those rows already carry
   `.show`, so BS5 leaves them at their natural `display: table-row`. */
.collapse.in:not(tr) {
    display: block;
}

/* ---- Horizontal forms + grid offsets (QA #19715: login/auth & several admin
   forms render label above field or misaligned) --------------------------------
   In Bootstrap 3 a `.form-horizontal .form-group` WAS a `.row` (a flex/float row
   of label + field). ~13 views (Login, ForgotPassword, ResetPassword, SendCode,
   VerifyCode, ChangePassword, EditEmployeeLoan, EditEducationalPayee*, ...) use
   `.mb-3` (or `.form-group`) as the group wrapper with `col-* ` label + field.
   Bootstrap 5 gives `.form-horizontal`/`.form-group` no layout, so the columns
   don't sit on one row. Re-establish the row so the label sits left of the field. */
.form-horizontal .form-group,
.form-horizontal .mb-3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* Bootstrap 3 right-aligned the label column in horizontal forms (at >=md, matching
   the col-md-* widths these views use) so the label sits tight against its field
   instead of jammed to the page's left edge (QA bug 1: ForgotPassword / Login /
   ResetPassword / etc.). */
@media (min-width: 768px) {
    .form-horizontal .control-label,
    .form-horizontal .col-form-label {
        text-align: right;
        /* BS3 grid gutter between the label column and its field; these labels sit
           in .mb-3 (not a .row) so no column padding applies -> add it back. */
        padding-right: 15px;
    }
}

/* Bootstrap 3 column offsets were renamed to `.offset-*` in v4/5. ~36 views still
   use the old `.col-*-offset-*` names. Re-map them to margin-left at the matching
   Bootstrap 5 grid breakpoints (sm >=576, md >=768, lg >=992). */
@media (min-width: 576px) {
    .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%; }
}

@media (min-width: 768px) {
    .col-md-offset-1 { margin-left: 8.33333333%; }
    .col-md-offset-2 { margin-left: 16.66666667%; }
    .col-md-offset-3 { margin-left: 25%; }
    .col-md-offset-4 { margin-left: 33.33333333%; }
}

@media (min-width: 992px) {
    .col-lg-offset-1 { margin-left: 8.33333333%; }
    .col-lg-offset-2 { margin-left: 16.66666667%; }
    .col-lg-offset-3 { margin-left: 25%; }
    .col-lg-offset-4 { margin-left: 33.33333333%; }
}

/* ---- Links: BS3 color + no underline --------------------------------------
   Bootstrap 5 underlines links and uses #0d6efd; Bootstrap 3 used #337ab7 with
   no underline. Restore both app-wide. No !important, so more specific rules
   (e.g. white footer links, .btn, .navbar) still win. */
a {
    color: #337ab7;
    text-decoration: none;
}

/* Login "Forgot your password?" is a bare <p> that inherits the large public
   site body font; size it to match the form. */
#loginForm p a {
    font-size: 14px;
}

/* ---- Code blocks: BS3 gave <pre>/<code> a light-grey boxed look; BS5 dropped
   it, leaving API Documentation code samples unboxed (QA bug 49). ---- */
code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
}

/* ---- Tom Select controls: match the BS3 form-control spacing so the enhanced
   search/filter dropdowns line up with plain inputs on every admin page. The
   vendored BS5 theme (tom-select.bootstrap5.min.css) uses an asymmetric, shorter
   padding (5px 12px 2px on multi) and a 6px radius, making the control sit tighter
   than the original BS3 dropdown (QA bug 28 CapWaiver / Annual Limit Exception,
   and 23/31 AccountStatementQueue). Restore the 34px height, symmetric 6px 12px
   padding, #ccc border, and 4px radius used elsewhere. This file loads BEFORE the
   Tom Select theme, so !important is required to win the cascade. Global: applies
   to every `.ts-control` across the admin app. ---- */
.ts-control,
.ts-wrapper.multi.has-items .ts-control {
    padding: 6px 12px !important;
    color: #555;
    font-size: 14px;
    line-height: 1.42857143;
    align-items: center;
}

/* Leave room for the caret on single-selects (native form-select style). */
.ts-wrapper.single .ts-control {
    padding-right: 27px !important;
    flex-wrap: nowrap;
}

/* Same right-padding reservation for multi .form-control wrappers that also
   show a caret — prevents the last selected chip from sliding under the chevron. */
.ts-wrapper.form-control.multi .ts-control {
    padding-right: 27px !important;
}

/* TomSelect's Bootstrap 5 theme draws the chevron only on
   .ts-wrapper:not(.form-control,.form-select).single .ts-control.
   All our <select class="form-control selectpicker"> elements cause TomSelect
   to copy .form-control onto the wrapper, so that rule never matches.  The theme
   also forces background:transparent on the inner .ts-control for .form-control
   wrappers, so the caret must live on the wrapper itself instead. */
.ts-wrapper.form-control.single,
.ts-wrapper.form-control.multi {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

/* Keep the selected item on one line so a long option label (e.g. a full company
   name) can't wrap and push the control taller than the 34px form-control height.
   Multi-select chips still wrap -- this only targets the single-item control. */
.ts-wrapper.single .ts-control > .item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ts-wrapper.single .ts-control input {
    min-width: auto;
    margin-right: -50px !important;
}

/* BS3 form-control:focus ring. */
.ts-wrapper.focus .ts-control {
    border-color: #66afe9 !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6) !important;
}

/* Selected chips (multi-select): vertically centered, BS3-ish spacing.
   min-width:0 lets the item shrink below its content size inside the flex
   control so overflow/ellipsis can actually fire on long option text. */
.ts-wrapper.multi .ts-control > .item {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 3px;
    background: none !important;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prevent clicking the pill text from triggering Tom Select's item-click
   handler, which removes the DOM element without going through a proper
   deselect (pill disappears but option stays checked in the dropdown).
   Clicks on the text area fall through to the .ts-control, which opens
   the dropdown. The × remove button restores its own pointer events so
   deselection via the button still works. */
.ts-wrapper.multi .ts-control > .item {
    pointer-events: none;
}
.ts-wrapper.multi .ts-control > .item .remove {
    pointer-events: auto;
}

/* Keep dropdown options on a single line — long option text would otherwise
   wrap and expand the row height unevenly. Truncate with an ellipsis so the
   option stays one line regardless of the dropdown width. */
.ts-dropdown .option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-dropdown {
    width: auto !important;
    min-width: 100%;
}

.plugin-dropdown_input .dropdown-input {
    max-width: 100%;
}

/* `.row` was a BS3 clearfix container (floated columns); in BS5 it's `display:flex`,
   and float has NO effect on a flex item -- so a `pull-right` button ported to
   `float-end` and left as a direct child of `.row` (no `.col-*` wrapper) silently
   stopped floating right and just sits in normal flex order instead (e.g. Edit
   Company's "Integrate to Production"/"Duplicate Company" buttons, which should
   cluster at the row's right edge but render at the left). Recreate the float
   with the flex equivalent: an auto left-margin on the first floated child
   consumes all free space before it, pushing it (and its floated siblings) to
   the end of the row -- but only the FIRST one should get the auto margin, so
   subsequent floated siblings stack immediately next to it rather than each
   being pushed further right. Scoped to a DIRECT `.row` child so `.float-end`
   used legitimately elsewhere (inside a `.card-header`, inside a `.col-*`) is
   untouched.

   margin-left:auto alone isn't enough: Bootstrap 5's grid sets `.row > * { width:
   100% }` on every direct row child, so the wrapper still spans the full row
   width and leaves no free space for the auto margin to consume -- it just wraps
   to its own full-width line instead (e.g. ManageEducationalPayees' "Export"
   button). Reset it to content width like the bare-button rule below -- and
   pin it to the row's cross-axis center too, or `align-items: stretch` grows
   this wrapper (and the button inside it) to the height of the tallest
   sibling column, making Export visibly taller than the other row buttons. */
.row > .float-end {
    margin-left: auto;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    align-self: center;
}

.row > .float-end ~ .float-end {
    margin-left: 0;
}

/* BS3's .row was a plain block (cleared via a ::before/::after clearfix, not a
   formatting-context root), so a float-end/float-start button placed directly
   before it (e.g. "Generate Report" above the Quality Assurance Queue table, or
   "Add Tier"/"Add Semester" above a company-program section) never displaced it --
   the row just started immediately below in normal flow. BS5's .row is
   `display:flex`, and flex containers -- like any block-formatting-context root --
   refuse to sit beside an earlier float: instead of overlapping it, they shrink to
   fit the remaining width for their ENTIRE height (not just where the float
   actually is), leaving a permanent gap the width of the button down the whole
   table (confirmed via DevTools: .row measured ~140px narrower than its
   container, exactly the "Generate Report" button's width). Force the row onto a
   fresh line below any preceding float, restoring the BS3-era full-width layout. */
.float-end + .row,
.float-end + br + .row,
.float-start + .row,
.float-start + br + .row {
    clear: both;
}

/* ---- BS3 .radio-inline / .checkbox-inline (dropped in BS5) ----
   Still used by e.g. the AWS Textract results pane; without these the radios
   run together with no spacing (QA bug 83). Values are BS3 3.4.1's own. */
.radio-inline,
.checkbox-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;
}

.radio-inline input[type="radio"],
.checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
    margin-top: 4px;
}

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
    margin-top: 0;
    margin-left: 10px;
}

/* Close (×) in card headers: same BS3 float the modal-header rule above restores.
   The draggable Processing Steps / AWS Textract panes put a .btn-close before the
   .card-title inside a block .card-header, so without the float it stacks on its
   own line above the title (QA bug 83). */
.card-header .btn-close,
.card-header .close {
    float: right;
    margin: 0;
}