/*
 * Bootstrap 3 → Bootstrap 5 compatibility layer
 *
 * Bootstrap 3.4.1 has been upgraded to Bootstrap 5.3.3 to address the
 * end-of-life security finding (CWE-1035). This file provides backward-
 * compatible CSS class aliases so that legacy screens continue to render
 * correctly without needing to rewrite every template at once.
 */

/* -----------------------------------------------------------------------
 * Panel (Bootstrap 3) → Card (Bootstrap 5)
 * ----------------------------------------------------------------------- */
.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.panel-default {
    border-color: #ddd;
}

.panel-heading {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-body {
    padding: 15px;
    flex: 1 1 auto;
}

.panel-footer {
    padding: 0.75rem 1rem;
    background-color: #f7f7f7;
    border-top: 1px solid rgba(0, 0, 0, 0.125);
    border-bottom-right-radius: calc(0.375rem - 1px);
    border-bottom-left-radius: calc(0.375rem - 1px);
}

.panel-title {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
}

.panel-title a {
    color: inherit;
    text-decoration: none;
}

.panel-group {
    margin-bottom: 1rem;
}

.panel-group .panel {
    margin-bottom: 0;
    border-radius: 0.375rem;
}

.panel-group .panel + .panel {
    margin-top: 5px;
}

.panel-group .panel-heading {
    border-bottom: 0;
}

.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: 1px solid #ddd;
}

.panel-group .panel-footer {
    border-top: 0;
}

.panel-group .panel-footer + .panel-collapse > .panel-body {
    border-bottom: 1px solid #ddd;
}

.panel-primary {
    border-color: #337ab7;
}

.panel-primary .panel-heading {
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

.panel-success {
    border-color: #d6e9c6;
}

.panel-success .panel-heading {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.panel-info {
    border-color: #bce8f1;
}

.panel-info .panel-heading {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.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;
}

/* -----------------------------------------------------------------------
 * Float utilities (Bootstrap 3 pull-* → Bootstrap 5 float-*)
 * ----------------------------------------------------------------------- */
.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

/* -----------------------------------------------------------------------
 * Button aliases (Bootstrap 3 → Bootstrap 5)
 * ----------------------------------------------------------------------- */

/* Bootstrap 3 .btn-primary used #337ab7 normal / #286090 hover.
 * Bootstrap 5 defaults to #0d6efd normal / #0b5ed7 hover (royal blue).
 * Override the Bootstrap 5 CSS custom properties to restore Bootstrap 3
 * colours so .btn-primary buttons (Search, Login, etc.) behave like the
 * PrimeVue .p-button which also uses #286090 on hover (from theme.css). */
.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:           #204d74;
    --bs-btn-active-border-color: #122b40;
    --bs-btn-focus-shadow-rgb:    49, 112, 143;
    --bs-btn-disabled-bg:         #337ab7;
    --bs-btn-disabled-border-color: #2e6da4;
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
/* Bootstrap 3 showed cursor:not-allowed on disabled buttons;
 * Bootstrap 5 uses pointer-events:none instead. Restore the cursor
 * so the UX matches the reference server. */
.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------
 * Glyphicons → Font Awesome 4 (fa is already loaded via webjars)
 *
 * Font Awesome 4 unicode references:
 *   arrow-up     f062   arrow-down  f063   arrow-left  f060
 *   list-alt     f022   search      f002   question     f128
 *   user         f007   sign-out    f08b   sign-in      f090
 *   calendar     f073   bar-chart   f080   info-circle  f05a
 * ----------------------------------------------------------------------- */
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'FontAwesome', sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-arrow-up::before         { content: "\f062"; }
.glyphicon-arrow-down::before       { content: "\f063"; }
.glyphicon-arrow-left::before       { content: "\f060"; }
.glyphicon-list-alt::before         { content: "\f022"; }
.glyphicon-search::before           { content: "\f002"; }
.glyphicon-question-sign::before    { content: "\f128"; }
.glyphicon-user::before             { content: "\f007"; }
.glyphicon-log-out::before          { content: "\f08b"; }
.glyphicon-log-in::before           { content: "\f090"; }
.glyphicon-calendar::before         { content: "\f073"; }
.glyphicon-stats::before            { content: "\f080"; }
.glyphicon-info-sign::before        { content: "\f05a"; }
.glyphicon-ok::before               { content: "\f00c"; }
.glyphicon-remove::before           { content: "\f00d"; }
.glyphicon-pencil::before           { content: "\f040"; }
.glyphicon-trash::before            { content: "\f1f8"; }
.glyphicon-plus::before             { content: "\f067"; }
.glyphicon-minus::before            { content: "\f068"; }
.glyphicon-refresh::before          { content: "\f021"; }
.glyphicon-download::before         { content: "\f019"; }
.glyphicon-upload::before           { content: "\f093"; }
.glyphicon-print::before            { content: "\f02f"; }
.glyphicon-home::before             { content: "\f015"; }
.glyphicon-cog::before              { content: "\f013"; }
.glyphicon-filter::before           { content: "\f0b0"; }
.glyphicon-wrench::before           { content: "\f0ad"; }
.glyphicon-lock::before             { content: "\f023"; }
.glyphicon-eye-open::before         { content: "\f06e"; }
.glyphicon-eye-close::before        { content: "\f070"; }
.glyphicon-save::before             { content: "\f0c7"; }
.glyphicon-folder-open::before      { content: "\f07c"; }
.glyphicon-floppy-disk::before      { content: "\f0c7"; }
.glyphicon-warning-sign::before     { content: "\f071"; }
.glyphicon-exclamation-sign::before { content: "\f06a"; }
.glyphicon-ban-circle::before       { content: "\f05e"; }
.glyphicon-envelope::before         { content: "\f0e0"; }
.glyphicon-file::before             { content: "\f15b"; }
.glyphicon-tags::before             { content: "\f02c"; }
.glyphicon-tag::before              { content: "\f02b"; }
.glyphicon-star::before             { content: "\f005"; }
.glyphicon-star-empty::before       { content: "\f006"; }
.glyphicon-heart::before            { content: "\f004"; }
.glyphicon-comment::before          { content: "\f075"; }
.glyphicon-time::before             { content: "\f017"; }
.glyphicon-road::before             { content: "\f018"; }
.glyphicon-bell::before             { content: "\f0f3"; }
.glyphicon-align-left::before       { content: "\f036"; }
.glyphicon-align-right::before      { content: "\f038"; }
.glyphicon-align-center::before     { content: "\f037"; }
.glyphicon-align-justify::before    { content: "\f039"; }
.glyphicon-list::before             { content: "\f03a"; }
.glyphicon-indent-left::before      { content: "\f03b"; }
.glyphicon-indent-right::before     { content: "\f03c"; }
.glyphicon-facetime-video::before   { content: "\f03d"; }
.glyphicon-picture::before          { content: "\f03e"; }
.glyphicon-map-marker::before       { content: "\f041"; }
.glyphicon-adjust::before           { content: "\f042"; }
.glyphicon-tint::before             { content: "\f043"; }
.glyphicon-bold::before             { content: "\f032"; }
.glyphicon-italic::before           { content: "\f033"; }
.glyphicon-text-height::before      { content: "\f034"; }
.glyphicon-text-width::before       { content: "\f035"; }
.glyphicon-move::before             { content: "\f047"; }
.glyphicon-step-backward::before    { content: "\f048"; }
.glyphicon-fast-backward::before    { content: "\f049"; }
.glyphicon-backward::before         { content: "\f04a"; }
.glyphicon-play::before             { content: "\f04b"; }
.glyphicon-pause::before            { content: "\f04c"; }
.glyphicon-stop::before             { content: "\f04d"; }
.glyphicon-forward::before          { content: "\f04e"; }
.glyphicon-fast-forward::before     { content: "\f050"; }
.glyphicon-step-forward::before     { content: "\f051"; }
.glyphicon-eject::before            { content: "\f052"; }
.glyphicon-chevron-left::before     { content: "\f053"; }
.glyphicon-chevron-right::before    { content: "\f054"; }
.glyphicon-plus-sign::before        { content: "\f055"; }
.glyphicon-minus-sign::before       { content: "\f056"; }
.glyphicon-remove-sign::before      { content: "\f057"; }
.glyphicon-ok-sign::before          { content: "\f058"; }
.glyphicon-chevron-up::before       { content: "\f077"; }
.glyphicon-chevron-down::before     { content: "\f078"; }
.glyphicon-retweet::before          { content: "\f079"; }
.glyphicon-shopping-cart::before    { content: "\f07a"; }
.glyphicon-briefcase::before        { content: "\f0b1"; }
.glyphicon-fullscreen::before       { content: "\f0b2"; }
.glyphicon-phone::before            { content: "\f095"; }
.glyphicon-pushpin::before          { content: "\f08d"; }
.glyphicon-phone-alt::before        { content: "\f098"; }
.glyphicon-tower::before            { content: "\f1cd"; }
.glyphicon-cloud-download::before   { content: "\f0ed"; }
.glyphicon-cloud-upload::before     { content: "\f0ee"; }
.glyphicon-tree-conifer::before     { content: "\f1bb"; }
.glyphicon-tree-deciduous::before   { content: "\f1bb"; }
.glyphicon-cd::before               { content: "\f109"; }
.glyphicon-hdd::before              { content: "\f0a0"; }
.glyphicon-tasks::before            { content: "\f0ae"; }
.glyphicon-th-list::before          { content: "\f00b"; }
.glyphicon-th::before               { content: "\f009"; }
.glyphicon-th-large::before         { content: "\f009"; }
.glyphicon-zoom-in::before          { content: "\f00e"; }
.glyphicon-zoom-out::before         { content: "\f010"; }
.glyphicon-new-window::before       { content: "\f08e"; }
.glyphicon-edit::before             { content: "\f044"; }
.glyphicon-share::before            { content: "\f064"; }
.glyphicon-check::before            { content: "\f046"; }
.glyphicon-screenshot::before       { content: "\f030"; }
.glyphicon-record::before           { content: "\f111"; }
.glyphicon-repeat::before           { content: "\f01e"; }
.glyphicon-sort::before             { content: "\f0dc"; }
.glyphicon-sort-by-alphabet::before { content: "\f15d"; }
.glyphicon-sort-by-order::before    { content: "\f160"; }
.glyphicon-sort-by-attributes::before { content: "\f0de"; }
.glyphicon-unchecked::before        { content: "\f096"; }
.glyphicon-expand::before           { content: "\f065"; }
.glyphicon-collapse-down::before    { content: "\f107"; }
.glyphicon-collapse-up::before      { content: "\f106"; }
.glyphicon-flash::before            { content: "\f0e7"; }
.glyphicon-off::before              { content: "\f011"; }
.glyphicon-asterisk::before         { content: "\f069"; }
.glyphicon-cloud::before            { content: "\f0c2"; }
.glyphicon-random::before           { content: "\f074"; }
.glyphicon-globe::before            { content: "\f0ac"; }
.glyphicon-leaf::before             { content: "\f06c"; }
.glyphicon-fire::before             { content: "\f06d"; }
.glyphicon-flag::before             { content: "\f024"; }
.glyphicon-heart-empty::before      { content: "\f08a"; }
.glyphicon-signal::before           { content: "\f012"; }
.glyphicon-education::before        { content: "\f19d"; }
.glyphicon-cutlery::before          { content: "\f0f5"; }

/* -----------------------------------------------------------------------
 * Navbar (Bootstrap 3 navbar-default → Bootstrap 5 navbar-light)
 *
 * legerity.css already sets the correct white link colour (#ffffffe6) and
 * uppercase 11 px font for the navbar. This block only restores structural
 * Bootstrap 3 properties that Bootstrap 5 removed:
 *  • text-decoration: none  — Bootstrap 5 adds underline to all <a> tags;
 *    Bootstrap 3 component CSS suppressed it inside navbars.
 *  • padding-left/right     — Bootstrap 5 .navbar-nav .nav-link strips
 *    horizontal padding; without it the dropdown ▾ arrow merges visually
 *    with the next item's text.
 * The generic colour values (#777, #333) below are intentionally lower-
 * priority than legerity.css (which loads after this file) so they act
 * only as safe fallbacks on pages that don't load legerity.css.
 * ----------------------------------------------------------------------- */
.navbar-default {
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #777;
}

/* Remove Bootstrap 5 global underline; restore Bootstrap 3 navbar link
 * layout properties. Bootstrap 3 set display:block, position:relative,
 * background:transparent, text-shadow and 15px horizontal padding on all
 * navbar nav links. */
.navbar .navbar-nav > li > a {
    display: block;
    position: relative;
    background-color: transparent;
    text-decoration: none;
    padding-left:  15px;
    padding-right: 15px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Bootstrap 5 adds 0.5rem top/bottom padding to .navbar by default, making
 * the navbar ~60px tall vs Bootstrap 3's 50px. Remove it so the navbar
 * height matches the original. The nav-link padding (15px top/bottom set
 * in the @media block below) already determines the correct height. */
.navbar {
    padding-top:    0 !important;
    padding-bottom: 0 !important;
}

.navbar-default .navbar-nav > li > a {
    color: #777;   /* overridden to white by legerity.css on real pages */
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
    background-color: transparent;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
}

.navbar-default .navbar-toggle {
    border-color: #ddd;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #ddd;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
}

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #e7e7e7;
}

/* -----------------------------------------------------------------------
 * Form controls (Bootstrap 3 form-group compatibility)
 * ----------------------------------------------------------------------- */
.form-group {
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------
 * Well (Bootstrap 3 component removed in Bootstrap 4+)
 * ----------------------------------------------------------------------- */
.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-lg {
    padding: 24px;
    border-radius: 6px;
}

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

/* -----------------------------------------------------------------------
 * Misc Bootstrap 3 utility aliases
 * ----------------------------------------------------------------------- */
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }
.text-center { text-align: center !important; }

/* Bootstrap 3 "in" class was used to mark open collapse/dropdown panels */
.collapse.in {
    display: block;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 .show / .hidden general visibility utilities
 *
 * Bootstrap 5 removed .show and .hidden as general-purpose utilities
 * (they only apply to specific components like dropdowns and modals).
 * FTL screen formCreator.js uses these to toggle validation error messages:
 *   $errorHolder.addClass("show")    ← must result in display: block
 *   $errorHolder.addClass("hidden")  ← must result in display: none
 * Without these rules, validation errors on FTL dialog boxes never appear.
 * ----------------------------------------------------------------------- */
.show   { display: block !important; }
.hidden { display: none  !important; }

/* -----------------------------------------------------------------------
 * Bootstrap 3 nav-tabs compat
 *
 * Bootstrap 3 tab rendering depends on three things that Bootstrap 5 changed:
 *  1. <li> margin-bottom: -1px — overlaps the tab-content top border so the
 *     active tab appears seamlessly connected. Without it there is a 1px gap.
 *  2. <a> padding: 10px 15px / border: 1px solid #ddd / color: #555 — the
 *     Bootstrap 3 tab link appearance.
 *  3. position: relative on <li> — required for z-index stacking of active tab.
 * ----------------------------------------------------------------------- */
.nav-tabs > li {
    margin-bottom: -1px;
    position: relative;
}
.nav-tabs > li > a {
    display: block;
    padding: 10px 15px;
    margin-right: 2px;
    line-height: 1.42857143;
    border-radius: 4px 4px 0 0;
    color: #555555;
    text-decoration: none;
}

/* Bootstrap 3 label (badge/label component) */
.label {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}

.label-default  { background-color: #777; }
.label-primary  { background-color: #337ab7; }
.label-success  { background-color: #5cb85c; }
.label-info     { background-color: #5bc0de; }
.label-warning  { background-color: #f0ad4e; }
.label-danger   { background-color: #d9534f; }

/* -----------------------------------------------------------------------
 * Bootstrap-select compatibility for Bootstrap 5
 * The bootstrap-select plugin uses Bootstrap 3/4 class names internally
 * ----------------------------------------------------------------------- */
.bootstrap-select .btn {
    border-radius: 0.25rem;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 .form-control appearance
 *
 * Bootstrap 5 changed many .form-control defaults. Restore the exact
 * Bootstrap 3 values so text inputs look identical to the pre-upgrade app.
 * ----------------------------------------------------------------------- */
.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555555;
    border-color: #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/* Textareas and multi-line selects should not have a fixed height */
textarea.form-control,
select[multiple].form-control {
    height: auto;
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

/* PrimeVue Dropdown/ComboBox wrappers: strip form-control border from the
 * outer span so only the inner .p-inputtext shows its border (prevents
 * double-border). Calendar wrappers are intentionally EXCLUDED here because
 * they need the form-control height/border for proper visual sizing.
 * Without this exclusion, Calendar inputs appear too small (height: auto
 * instead of the Bootstrap 3 height: 34px). */
span.p-inputwrapper.p-dropdown.form-control {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
    height: auto !important;
    border-radius: 0 !important;
}

/* Calendar wrapper keeps form-control height/border (34px) but the form-control
 * padding (6px 12px) creates unwanted inner spacing. Zero it out so the inner
 * .p-inputtext sits flush against the border, then ensure the inner input
 * stretches to fill the full 34px height. */
span.p-inputwrapper.p-calendar.form-control {
    padding: 0 !important;
}
span.p-inputwrapper.p-calendar.form-control .p-inputtext {
    height: 100% !important;
    font-size: 0.8em !important;  /* 0.8 × 14px = 11.2px — matches reference compact style */
}

/* Make PrimeVue text inputs match Bootstrap 3 form-control appearance. */
.p-inputtext {
    border-color: #ccc !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
}
.p-inputtext:enabled:focus {
    border-color: #66afe9 !important;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
                0 0 8px rgba(102, 175, 233, 0.6) !important;
}

/* Restore 0.8em font-size for PrimeVue inputs (.p-component) that sit inside
 * .form-group .dropdown or .form-group .dropdown-default-background.
 * legerity.css sets font-size: 0.8em on those containers; the reference server
 * ("before") showed 0.8em on the Calendar input. Our global
 * .p-component { font-size: 1rem !important } was overriding it to 14px.
 * Using a more-specific selector restores the intended smaller text size. */
.form-group .dropdown .p-component,
.form-group .p-dropdown .p-component,
.form-group .dropdown-default-background .p-component,
/* Also covers PrimeVue Dropdowns rendered as span.p-inputwrapper.p-dropdown.form-control
 * outside a .form-group. Calendar wrappers are intentionally excluded so
 * Calendar inputs keep the full body font-size (14px), not 0.8em (~11px). */
span.p-inputwrapper.p-dropdown.form-control .p-component {
    font-size: 0.8em !important;
}

/* The Business Date Calendar in filter panels uses a plain <label> (no
 * control-label class) so font-weight: bold !important on .control-label
 * does not apply to it. Make bare labels inside col-md-3 filter columns
 * bold so all filter labels have consistent weight. */
.col-md-3 > label:not(.control-label) {
    font-weight: bold;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option-inner-inner {
    overflow: hidden;
}

/* -----------------------------------------------------------------------
 * <select class="form-control"> compatibility
 *
 * Bootstrap 3 used .form-control on both <input> and <select> elements.
 * Bootstrap 5 introduced a separate .form-select class for <select>.
 * Without this rule, a <select class="form-control"> looks like a plain
 * text input (no dropdown arrow, wrong padding). Apply form-select
 * appearance to any select carrying the Bootstrap 3 class name.
 * ----------------------------------------------------------------------- */
select.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 32px 6px 12px;  /* right-pad for chevron */
    line-height: 1.42857143;
    color: #555555;
    background-color: #fff;
    border: 1px inset #E0E0E0;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    /* Bootstrap 5 chevron arrow — Bootstrap 3 had none, but Bootstrap 5
     * requires explicit styling for <select class="form-control"> */
    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 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select.form-control:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 legerity.css form-group select appearance
 *
 * In Bootstrap 3, select dropdowns inside .form-group received custom
 * styling from legerity.css (.form-group .dropdown .btn-default):
 *   border: 1px inset #E0E0E0 — the characteristic grey inset border
 *   height: 34px              — Bootstrap 3 form-control height
 *   padding: 6px 12px         — Bootstrap 3 form-control padding
 *   color: #555               — Bootstrap 3 input text colour
 *   line-height: 1.42857143   — Bootstrap 3 line-height
 *
 * Our general select.form-control rule above overrides all of these with
 * Bootstrap 5 styling (solid border, rem padding, SVG chevron). Restore
 * the Bootstrap 3 / legerity.css values for selects inside form-groups so
 * the ComboBox and other form-group dropdowns match the pre-upgrade look.
 * Right padding is kept wide enough to display the SVG dropdown chevron.
 * ----------------------------------------------------------------------- */
.form-group select.form-control {
    border: 1px inset #E0E0E0 !important;
    border-radius: 4px !important;
    height: 34px !important;
    padding: 6px 32px 6px 12px !important;
    color: #555555 !important;
    line-height: 1.42857143 !important;
}
.form-group select.form-control:focus {
    border-color: #66afe9 !important;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
                0 0 8px rgba(102, 175, 233, 0.6) !important;
}

/* -----------------------------------------------------------------------
 * img-responsive (Bootstrap 3) → img-fluid (Bootstrap 5)
 * Bootstrap 3 used .img-responsive to make images scale with their parent.
 * Bootstrap 5 renamed this to .img-fluid. Provide the alias so existing
 * templates (e.g. login.ftl) continue to work.
 * ----------------------------------------------------------------------- */
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 column position: relative
 *
 * Bootstrap 3 added position: relative to every column class so that
 * absolutely-positioned children (dropdown menus, overlay elements, etc.)
 * use the column as their containing block. Bootstrap 5 dropped this.
 * Restore it for all column selectors — both Bootstrap 5 native (col-sm-*)
 * and Bootstrap 3 compat (col-xs-*) — to preserve that behaviour.
 * ----------------------------------------------------------------------- */
[class^="col-"],
[class*=" col-"],
.col {
    position: relative;
}

/* Bootstrap 5's .row rule sets --bs-gutter-x: 1.5rem LOCALLY, overriding
 * the :root value we set to 30px. Re-apply the Bootstrap 3 gutter directly
 * on .row so negative margins stay -15px per side (matching Bootstrap 3). */
.row {
    --bs-gutter-x: 30px;
}

/* -----------------------------------------------------------------------
 * col-xs-* grid aliases (Bootstrap 3 → Bootstrap 5)
 *
 * CRITICAL: These must only apply at the xs viewport (<576px).
 * Without the media-query guard they would override Bootstrap 5's
 * col-sm-*, col-md-*, col-lg-* rules (which come earlier in the cascade
 * because bootstrap.css is loaded before bootstrap-compat.css), causing
 * every column to be full-width on all screen sizes.
 * ----------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .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%; }
}

/* -----------------------------------------------------------------------
 * Column offset aliases (Bootstrap 3 col-*-offset-N → Bootstrap 5 offset-*-N)
 * ----------------------------------------------------------------------- */
.col-xs-offset-0  { margin-left: 0; }
.col-xs-offset-1  { margin-left:  8.33333333%; }
.col-xs-offset-2  { margin-left: 16.66666667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.33333333%; }
.col-xs-offset-5  { margin-left: 41.66666667%; }
.col-xs-offset-6  { margin-left: 50%; }

@media (min-width: 576px) {
    .col-sm-offset-0 { margin-left: 0; }
    .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-5 { margin-left: 41.66666667%; }
    .col-sm-offset-6 { margin-left: 50%; }
}

@media (min-width: 768px) {
    .col-md-offset-0 { margin-left: 0; }
    .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%; }
    .col-md-offset-5 { margin-left: 41.66666667%; }
    .col-md-offset-6 { margin-left: 50%; }
}

@media (min-width: 992px) {
    .col-lg-offset-0 { margin-left: 0; }
    .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%; }
    .col-lg-offset-5 { margin-left: 41.66666667%; }
    .col-lg-offset-6 { margin-left: 50%; }
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 form utilities removed in Bootstrap 4+
 * ----------------------------------------------------------------------- */

/* Bootstrap 3 set label { font-weight: bold; max-width: 100% } globally.
 * Bootstrap 5 removed both. Restore them so form labels — including those
 * in PrimeVue dialogs (.p-field label), filter panels, and login pages —
 * render bold with proper overflow containment, matching the reference. */
label {
    font-weight: bold;
    max-width: 100%;
}

/* .control-label → Bootstrap 5 .col-form-label.
 *
 * Bootstrap 3 made all .control-label elements bold. The padding-top/bottom
 * was ONLY intended for .form-horizontal .control-label to vertically centre
 * the label beside its input in a side-by-side layout.
 *
 * When applied unconditionally, the padding pushes .control-label elements
 * DOWN in stacked (vertical) form grids — such as PrimeVue CruDialog's
 * .p-formgrid. ComboBox.vue renders labels with class="control-label", so
 * dropdown fields in the dialog get extra top padding that plain text-input
 * fields don't, causing the entire column to appear lower.
 *
 * Fix: apply font-weight globally (Bootstrap 3 behaviour), but restrict
 * the vertical padding to .form-horizontal context only (matching the
 * original Bootstrap 3 scope). */
.control-label {
    margin-bottom: 0;
    font-size: inherit;
    font-weight: bold !important;
    line-height: 1.42857143;
}

/* Horizontal-form labels need padding to align vertically with inputs,
 * and text-align: right so the label text hugs the right edge of the label
 * column — this is Bootstrap 3's default for .form-horizontal .control-label.
 * Without it, "Login" and "Password" labels are left-aligned, making the
 * label text appear at different visual positions relative to the inputs. */
.form-horizontal .control-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    text-align: right;
}

/* .form-horizontal makes a <form>'s .form-group behave like a .row so that
 * col-* labels and inputs sit side-by-side (Bootstrap 3 horizontal form). */
.form-horizontal .form-group {
    --bs-gutter-x: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

/* Bootstrap 5's column padding only applies via .row > * — our .form-group
 * is not a .row so its col-* children get no horizontal padding by default.
 * Bootstrap 3 applied 15px padding to ALL col-* elements unconditionally.
 * Restore that behaviour so the gap between label and input matches Bootstrap 3. */
.form-horizontal .form-group > [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* fieldset inside a flex .form-group collapses to min-content width in browsers,
 * making percentage-width col-* children inside it near-zero. Make it a flex
 * row matching the form-group so label + input lay out side-by-side correctly. */
.form-horizontal .form-group > fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    width: 100%;
}
.form-horizontal .form-group > fieldset > [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 nested col-* inside .form-group (FTL view panels)
 *
 * Pattern used in FTL screens (e.g. definitionPart.ftl):
 *   <div class="form-group col-sm-4">
 *     <label class="col-sm-4 control-label">...</label>
 *     <div class="col-sm-6"><input ...></div>
 *   </div>
 * In Bootstrap 3, col-* elements floated, making label + input side-by-side.
 * In Bootstrap 5, they stack vertically without a .row wrapper.
 * Making .form-group[class*="col-"] a flex container restores the B3 layout
 * without requiring structural changes to every FTL template.
 * ----------------------------------------------------------------------- */
.form-group[class*="col-"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.form-group[class*="col-"] > [class*="col-"] {
    padding-right: 15px;
    padding-left: 15px;
}

/* .has-error / .has-success validation states (removed in Bootstrap 4+) */
.has-error .form-control {
    border-color: #a94442;
}
.has-error .form-control:focus {
    border-color: #843534;
    box-shadow: 0 0 0 0.2rem rgba(169, 68, 66, 0.25);
}
.has-error .control-label,
.has-error .help-block,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
    color: #a94442;
}

.has-success .form-control {
    border-color: #3c763d;
}
.has-success .control-label,
.has-success .help-block {
    color: #3c763d;
}

/* .help-block: muted hint text rendered beneath form controls */
.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
    font-size: 0.875em;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 tab .in alias
 * Bootstrap 3 used .tab-pane.fade.in.active; Bootstrap 5 uses .show.active.
 * ----------------------------------------------------------------------- */
.tab-pane.fade.in {
    opacity: 1;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 .divider inside dropdown menus → Bootstrap 5 .dropdown-divider
 * ----------------------------------------------------------------------- */
li.divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
    list-style: none;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 .dropdown-menu > li > a padding
 *
 * Bootstrap 3 styled plain <li><a> children of .dropdown-menu with padding
 * and block display. Bootstrap 5 only styles .dropdown-item elements.
 * Without this rule, navbar dropdown items have no padding and look squashed
 * or inconsistently spaced compared to the original Bootstrap 3 app.
 * legerity.css sets colour but not padding, so this rule is safe to add here.
 * ----------------------------------------------------------------------- */
.navbar .dropdown-menu > li > a,
.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: inherit;
    white-space: nowrap;
    text-decoration: none;
    background-color: transparent;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 .center-block utility (removed in Bootstrap 4+)
 * Used in Vue components e.g. the Search button in Runs.vue:
 *   <button class="btn btn-primary center-block">Search</button>
 * ----------------------------------------------------------------------- */
.center-block {
    display: block;
    margin-left:  auto;
    margin-right: auto;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 .caret (inline dropdown arrow) — removed in Bootstrap 4+
 * Used by bootstrap-select and legacy dropdown buttons.
 *
 * NOTE: Bootstrap 5 .dropdown-toggle already renders its own caret via the
 * ::after pseudo-element. Hide the explicit <span class="caret"> inside
 * dropdown-toggles to prevent a double-caret in the navbar.
 * ----------------------------------------------------------------------- */
.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;
}
/* Suppress the explicit BS3 caret glyph inside Bootstrap 5 dropdown-toggles
 * because Bootstrap 5 already provides a ::after arrow. Without this, every
 * navbar dropdown shows two indicators. */
.dropdown-toggle .caret {
    display: none;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 .open class for dropdowns — Bootstrap 5 uses .show instead.
 * bootstrap-select 1.13.x adds .open to its wrapper to reveal the menu.
 * ----------------------------------------------------------------------- */
.open > .dropdown-menu {
    display: block;
}
.open > a {
    outline: 0;
}

/* -----------------------------------------------------------------------
 * Nav tab / nav pill active state (Bootstrap 3 puts .active on the <li>;
 * Bootstrap 5 expects it on the <a> / .nav-link).
 * These rules cover the initial server-rendered active tab while the JS
 * shim copies the class to the <a> for subsequent click-driven switching.
 * ----------------------------------------------------------------------- */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs > li > a.active,
.nav-tabs > li > a.active:hover,
.nav-tabs > li > a.active:focus {
    color: #555555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #fff;
    background-color: #0d6efd;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 modal default width restoration
 *
 * Bootstrap 3 default: 600px. Bootstrap 5 default: 500px.
 * At 500px, 4-column (col-md-3) form layouts inside modals become ~125px
 * per column and long labels like "System User (identifier)" wrap to two
 * lines. Restore the Bootstrap 3 default so modal forms display correctly.
 * ----------------------------------------------------------------------- */
.modal-dialog {
    --bs-modal-width: 600px;
}
/* Bootstrap 3's .modal-lg was 900px; legerity.css overrides it to 950px.
 * Our .modal-dialog rule above would cap modal-lg at 600px — restore the
 * correct large width so report-definition and other modal-lg dialogs
 * display at the expected size. */
@media (min-width: 992px) {
    .modal-dialog.modal-lg {
        --bs-modal-width: 950px;
    }
}
@media (min-width: 768px) {
    .modal-dialog.modal-lg {
        --bs-modal-width: 900px;
    }
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 .close button → Bootstrap 5 .btn-close
 * Old pattern: <button class="close" data-dismiss="modal">&times;</button>
 * The × glyph is kept; the button is styled to look like Bootstrap 5's
 * close button and positioned correctly inside flex modal-headers.
 * ----------------------------------------------------------------------- */
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    padding: 0;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.close:hover {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}
/* In a flex modal-header float doesn't work — push button to the right
 * with margin-left: auto and give it the same dimensions as btn-close. */
.modal-header .close {
    float: none;
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    border-radius: 0.25rem;
}
.modal-header .close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.alert .close {
    float: right;
    font-size: inherit;
    opacity: 0.4;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 modal-title font-size restoration
 *
 * FTL modals use <h4 class="modal-title">. Bootstrap 5 makes all h4 elements
 * use responsive "fluid type" sizing: calc(1.275rem + 0.3vw) ≈ 23px at
 * 1920px viewport. Bootstrap 3 fixed this at 18px. Restore the original
 * size so modal headers match the reference.
 * ----------------------------------------------------------------------- */
.modal-title {
    font-size: 18px !important;
    line-height: 1.42857143 !important;
    margin: 0 !important;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 modal close-button layout fix for Bootstrap 5 flex header
 *
 * FTL modals render: <div class="modal-header"><button class="close">…
 * <h4 class="modal-title">…</h4></div>. Bootstrap 3's float:right on
 * .close made the button appear to the right of the title despite coming
 * first in the HTML. Bootstrap 5 makes modal-header a flex row, so the
 * DOM order is rendered literally: button appears to the LEFT of the title.
 *
 * Fix: use CSS flexbox order to visually put the title first, close last.
 * ----------------------------------------------------------------------- */
.modal-header .modal-title {
    order: 1;
}
.modal-header .close {
    order: 2;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 .sr-only (screen reader only text)
 *
 * Bootstrap 3 used .sr-only to hide helper text (e.g. "Close" in close
 * buttons) from visual display while keeping it for assistive technology.
 * Bootstrap 5 renamed this to .visually-hidden. Without this rule the
 * literal text "Close" inside <button class="close"><span class="sr-only">
 * Close</span></button> is visible in the modal header.
 * ----------------------------------------------------------------------- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 .navbar-toggle button (mobile hamburger)
 * Bootstrap 5 renamed this to .navbar-toggler; keep the old class working.
 * ----------------------------------------------------------------------- */
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}
.navbar-toggle:focus {
    outline: 0;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}
/*
 * Bootstrap 3 navbar responsive behaviour
 *
 * Bootstrap 5 requires .navbar-expand-{breakpoint} on the <nav> to show the
 * collapse pane automatically at wider viewports. Bootstrap 3 did this for
 * .navbar-default at 768 px without any extra class. These rules replicate
 * that behaviour so the navigation links appear on desktop without needing
 * to change every template.
 */
@media (min-width: 768px) {
    /* Hide the hamburger toggle at desktop */
    .navbar-toggle {
        display: none;
    }
    /* Force the collapse pane visible — Bootstrap 5 hides .collapse without
     * a matching .show class, but Bootstrap 3 showed it on desktop always. */
    .navbar .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        align-items: center;
        width: auto;
    }
    /* Keep nav items laid out horizontally */
    .navbar .navbar-nav {
        flex-direction: row;
    }
    .navbar .navbar-nav > li {
        float: left;
    }
    .navbar .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 20px;
    }
    /* Right-aligned nav items — float: right is ignored in flex containers;
     * margin-left: auto pushes the right nav to the far end of the flex row,
     * restoring the gap between RUN and LOG OUT that Bootstrap 3 produced
     * via float layout. */
    .navbar-right {
        float: right !important;
        margin-right: -15px;
        margin-left: auto;
    }
    /* Bootstrap 3's legerity.css sets img.logo { top: -15px; position: relative }
     * to vertically center the brand image inside Bootstrap 3's fixed-height
     * navbar. Bootstrap 5 uses flexbox alignment so the offset is wrong and
     * pushes the logo above the navbar text. Reset it here with !important so
     * this rule beats legerity.css which loads later in the cascade. */
    .navbar img.logo {
        top: 0 !important;
        position: static !important;
    }

    /* -----------------------------------------------------------------------
     * CRITICAL: Force navbar dropdown-menus to use position: absolute.
     *
     * Bootstrap 5 sets .navbar-nav .dropdown-menu { position: static } when
     * the <nav> does NOT have a .navbar-expand-{breakpoint} class. A static
     * dropdown flows inside the document — it expands to full page width and
     * pushes all content below it down (the logo appears at the bottom of the
     * screen when any top-level menu is opened).
     *
     * Bootstrap 3 never had this requirement; all dropdown-menus were
     * position: absolute by default. Restore that behaviour here so menus
     * open as compact overlays above the page content.
     * ----------------------------------------------------------------------- */
    .navbar-nav .dropdown-menu {
        position: absolute !important;
        z-index: 1000;
        /* Bootstrap 5 adds --bs-dropdown-spacer (0.125rem) gap between the
         * navbar and the dropdown, creating a visible white line. Bootstrap 3
         * had no gap. Remove it and the top border so the dropdown appears
         * flush against the navbar bottom edge. */
        margin-top: 0 !important;
        --bs-dropdown-spacer: 0;
        border-top: none;
    }
}

@media (max-width: 767px) {
    .navbar-header {
        float: none;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    /* Show when opened (Bootstrap 3 .in or Bootstrap 5 .show) */
    .navbar-collapse.collapse.in,
    .navbar-collapse.collapse.show,
    .navbar-collapse.collapsing {
        display: block !important;
    }
    .navbar-nav {
        float: none !important;
        margin-top: 7.5px;
    }
    .navbar-nav > li {
        float: none;
    }
    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-right {
        float: none !important;
        margin-right: 0;
    }
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 link defaults
 *
 * Bootstrap 3: a { text-decoration: none; background-color: transparent }
 *              a:hover, a:focus { text-decoration: underline; outline: 0 }
 *
 * Bootstrap 5 reversed this: a { text-decoration: underline } by default.
 * The user's reference showed no underlines on links in their normal state.
 * Restore Bootstrap 3 behaviour globally; underline only on hover/focus.
 * ----------------------------------------------------------------------- */
a {
    text-decoration: none;
    background-color: transparent;
}
a:hover,
a:focus {
    text-decoration: underline;
    outline: 0;
}

/* -----------------------------------------------------------------------
 * Link colour: Bootstrap 3's $link-color was customised to the application
 * brand blue (rgb(0,142,200)) matching the navbar. Bootstrap 5 changed the
 * default to #0d6efd (royal/bright blue). Override the Bootstrap 5 CSS
 * custom properties so all <a> links — DataTable run-name drill-downs,
 * breadcrumbs, general content links — render in the expected brand colour.
 * ----------------------------------------------------------------------- */
:root {
    --bs-link-color:           rgb(0, 142, 200);
    --bs-link-color-rgb:       0, 142, 200;
    --bs-link-hover-color:     rgb(0, 110, 160);
    --bs-link-hover-color-rgb: 0, 110, 160;

    /* Bootstrap 3 grid gutter = 30px total (15px per column side).
     * Bootstrap 5's --bs-gutter-x is the TOTAL gutter width; columns apply
     * calc(var / 2) per side. Setting 15px here gave only 7.5px per side,
     * making columns 15px wider than Bootstrap 3. 30px gives 15px per side
     * which exactly matches Bootstrap 3's $grid-gutter-width. */
    --bs-gutter-x: 30px;

    /* Move body font/colour/line-height overrides to :root so Bootstrap 5
     * components that reference these variables at ANY level (not just inside
     * body) consistently use the Bootstrap 3 values instead of Bootstrap 5's
     * defaults (system-ui, 1rem, 1.5, #212529). */
    --bs-body-font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size:   14px;
    --bs-body-color:       #333333;
    --bs-body-line-height: 1.42857143;
}

/* -----------------------------------------------------------------------
 * PrimeVue base component font-size correction
 *
 * PrimeVue's theme sets .p-component { font-size: 1.4rem } as its base.
 * At html { font-size: 14px } that resolves to 19.6 px — much larger than
 * the app's intended 14 px text. Override to 1rem so PrimeVue components
 * (DataTable cells, ComboBox, buttons, paginator, etc.) all render at 14 px
 * matching the rest of the application.
 *
 * font-family is intentionally left as 'inherit' so the component picks up
 * the Open Sans already set on body — matching the Bootstrap 3 computed
 * style where .p-component showed font-family: inherit (not an explicit value).
 *
 * !important is needed because PrimeVue's CSS loads inside the Vue bundle
 * which injects a <style> tag after this server-side stylesheet.
 * ----------------------------------------------------------------------- */
.p-component {
    font-size: 1rem !important;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 used 14 px as the base body font size; Bootstrap 5 inherits
 * the browser default of 16 px. Restore the original size so the existing
 * layouts (designed against 14 px) render at their intended proportions.
 *
 * CRITICAL: set font-size on <html> not just <body>.
 * The CSS `rem` unit is relative to the ROOT element (<html>), not <body>.
 * PrimeVue DataTable, PrimeFlex, and Bootstrap 5 all use `font-size: 1rem`
 * or `padding: Xrem` which resolve against the html element. Setting only
 * body{ font-size:14px } leaves rem = 16px so PrimeVue stays magnified.
 *
 * Font family: Bootstrap 5 drives its components via the CSS custom property
 * --bs-body-font-family (defaults to system-ui / Segoe UI on Windows) rather
 * than inheriting the body element's computed font-family. Override the
 * variable here so Bootstrap 5 components and legerity.css both resolve to
 * the same "Open Sans → Helvetica/Arial" stack used under Bootstrap 3.
 * ----------------------------------------------------------------------- */
html {
    font-size: 14px;
}
body {
    font-size: 14px;
    font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333333;
    line-height: 1.42857143;
    /* Prevent the page-level horizontal scrollbar caused by Bootstrap 5
     * .row negative margins (-15px each side from --bs-gutter-x: 30px) and
     * .navbar-right { margin-right: -15px } extending slightly beyond the
     * viewport. Bootstrap 3 achieved the same by containing all rows inside
     * .container/.container-fluid; clipping here is the equivalent safeguard. */
    overflow-x: hidden;
    --bs-body-font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-color: #333333;
    --bs-body-line-height: 1.42857143;
}

/* Bootstrap 5 sets --bs-dropdown-font-size: 1rem on .dropdown-menu which
 * overrides legerity.css's explicit 11px rule on .top-menu .dropdown-menu.
 * Reset the variable here to 11px so navbar dropdowns use the correct size. */
.top-menu .dropdown-menu,
.navbar .dropdown-menu {
    --bs-dropdown-font-size: 11px;
    font-size: 11px;
}

/* -----------------------------------------------------------------------
 * PrimeVue DataTable compact row padding
 *
 * PrimeVue's default --content-padding (1.25 rem) produces tall rows.
 * Reduce cell padding to match the compact row height the application had
 * before the Bootstrap 3 → 5 upgrade.
 *
 * !important is required because PrimeVue CSS loads inside the Vue bundle
 * which executes after this server-side stylesheet, so without it PrimeVue
 * would always win the cascade.
 * ----------------------------------------------------------------------- */
.p-datatable .p-datatable-thead > tr > th {
    padding: 7px 15px !important;
    /* The reference server also had legerity.css's .panel-collapse th { font-size: 0.85em }
     * reducing headers to ~12px inside panel bodies. Setting 14px !important here
     * made them larger than the reference. Remove the font-size override so
     * .panel-collapse th naturally reduces to 0.85em (≈12px) — matching the reference.
     * Headers outside .panel-collapse inherit 14px from .p-component, which is also correct. */
    color: #18181b !important;  /* PrimeVue theme.css value, overrides UA black */
}
/* Sort icon uses primeicons at 1rem. At our 14px root that renders at 14px;
 * the reference server had it at 10px (1rem × 10px root). Pin to 10px so
 * the icon stays compact inside the column header. */
.p-datatable .p-sortable-column-icon {
    font-size: 10px !important;
    margin-left: 5px !important;
}
.p-datatable .p-datatable-tbody > tr > td {
    padding: 10px 15px !important;
}
.p-datatable .p-datatable-tfoot > tr > td {
    padding: 10px 15px !important;
}

/* -----------------------------------------------------------------------
 * Bootstrap 3 table normalisation
 *
 * Bootstrap 3 applied border-spacing: 0 to ALL <table> elements globally.
 * Bootstrap 5 only applies it to elements with the .table class (via its
 * reboot). PrimeVue DataTable uses class="p-datatable-table" without the
 * Bootstrap .table class, so the inherited border-spacing from Bootstrap 5's
 * normalisation is absent. Restore Bootstrap 3's broad table rule so all
 * tables (including PrimeVue DataTable) have border-spacing: 0.
 *
 * Bootstrap 5 also adds caption-side: bottom to all tables. Bootstrap 3
 * did not. Reset it to top (the original HTML default) for non-.table tables.
 * ----------------------------------------------------------------------- */
table {
    border-spacing: 0;
    caption-side: top;
}

/* -----------------------------------------------------------------------
 * DataTable float clear
 *
 * Inside a RESULTS panel-body, Runs.vue floats a pull-left div (Runs
 * execution badge) and a pull-right div (Stop Run / Stats buttons). Without
 * clearing, the DataTable renders beside those floated elements on the same
 * line. Force it to start on a new line below all floated siblings.
 * ----------------------------------------------------------------------- */
.panel-body > .p-datatable {
    clear: both !important;
}

/* -----------------------------------------------------------------------
 * DataTable sticky-header z-index and background
 *
 * theme.css sets .sticky-header { position: relative } without a z-index.
 * Without a z-index, tbody rows that scroll beneath the stuck header appear
 * ON TOP of it (static-positioned siblings paint after relative ones at the
 * same z-level). Setting z-index: 2 ensures the header always paints above
 * data rows. The background on the thead itself (not just th cells) prevents
 * rows from showing through thead-level borders or padding when stuck.
 * ----------------------------------------------------------------------- */
.p-datatable-thead.sticky-header {
    z-index: 2 !important;
    background: white !important;
}

/* -----------------------------------------------------------------------
 * PrimeVue row-expander arrow size
 *
 * .p-component { font-size: 1rem } above reduces inherited icon font to 14px
 * making the chevron-right row-toggler arrow very small. The reference
 * server used font-size: 1rem on the toggler (= 10px at its 10px root).
 * At our 14px root, 1rem = 14px which is proportionally equivalent.
 * Using 1rem (not 1.4rem) matches the reference's proportional scaling.
 * ----------------------------------------------------------------------- */
.p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
    font-size: 10px !important;  /* reference: 1rem at 10px root = 10px */
    width: 20px !important;      /* reference: 2rem at 10px root = 20px */
    height: 20px !important;
}
/* theme.css explicitly sets .pi { font-size: 1rem } so the icon inside the
 * toggler doesn't inherit from the parent button — it stays at 1rem = 14px.
 * Override directly to match the reference's 1rem × 10px root = 10px. */
.p-datatable .p-datatable-tbody > tr > td .p-row-toggler .pi {
    font-size: 10px !important;
}

/* -----------------------------------------------------------------------
 * PrimeVue paginator compact sizing
 *
 * theme.css sets paginator buttons to min-width/height: 3rem = 42px at
 * 14px root. Reduce to Bootstrap 3 pagination proportions (~30px).
 * The active-page highlight uses indigo (#EEF2FF / #312E81) from PrimeVue
 * defaults; override to the application brand blue.
 * ----------------------------------------------------------------------- */
.p-paginator .p-paginator-pages .p-paginator-page,
.p-paginator .p-paginator-first,
.p-paginator .p-paginator-prev,
.p-paginator .p-paginator-next,
.p-paginator .p-paginator-last {
    min-width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    line-height: 28px !important;
}
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    background: rgba(0, 142, 200, 0.12) !important;
    border-color: rgb(0, 142, 200) !important;
    color: rgb(0, 142, 200) !important;
}
.p-paginator .p-dropdown {
    height: 30px !important;
    font-size: 12px !important;
}
/* The dropdown trigger chevron button inherits width:3rem from PrimeVue.
 * At our 14px root that resolves to 42px; the reference had 30px (3rem×10px).
 * Fix the trigger width to match the reference server. */
.p-paginator .p-dropdown .p-dropdown-trigger {
    width: 30px !important;
}
/* Ensure the rows-per-page dropdown panel does NOT show a scrollbar. */
.p-paginator .p-dropdown-panel .p-dropdown-items-wrapper {
    overflow-y: hidden !important;
}

/* -----------------------------------------------------------------------
 * PrimeVue dropdown panel / item sizing
 *
 * theme.css uses rem units. At our 14px root they resolve larger than at
 * the reference server's 10px root. Convert to px to match reference.
 *
 *  .p-dropdown-item  padding: 0.75rem 1rem  → 10.5px/14px (ours)
 *                                           →  7.5px/10px (reference)
 *  .p-dropdown-header padding: 0.5rem 0.75rem → 7px/10.5px (ours)
 *                                             → 5px/7.5px  (reference)
 * ----------------------------------------------------------------------- */
.p-dropdown-panel .p-dropdown-items .p-dropdown-item,
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group,
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
    padding: 7px 10px !important;
}
.p-dropdown-panel .p-dropdown-items {
    padding: 2px 0 !important;
}
.p-dropdown-panel .p-dropdown-header {
    padding: 5px 7px !important;
}

/* -----------------------------------------------------------------------
 * PrimeVue datepicker calendar sizing
 * theme.css uses rem units throughout the datepicker. At our 14px root
 * these resolve 40% larger than the reference server's 10px root.
 * Convert all rem-based datepicker sizes to explicit px values.
 *
 *  nav prev/next buttons : 2rem → 20px
 *  title line-height      : 2rem → 20px
 *  header padding         : 0.5rem → 5px
 *  table margin           : 0.5rem → 5px
 *  th/td padding          : 0.5rem → 5px
 *  day/date cell (span)   : 2.5rem → 25px  (2.5rem × 10px B3 root = 25px)
 *  table font-size        : 1rem → 14px (already correct via .p-component)
 * ----------------------------------------------------------------------- */
.p-datepicker .p-datepicker-header {
    padding: 5px !important;
}
.p-datepicker .p-datepicker-header .p-datepicker-title {
    line-height: 20px !important;
    font-size: 10px !important;
}
.p-datepicker .p-datepicker-header .p-datepicker-prev,
.p-datepicker .p-datepicker-header .p-datepicker-next {
    width: 20px !important;
    height: 20px !important;
    /* The chevron icon inside uses primeicons at font-size: 1rem = 14px at our
     * root. At the reference's 10px root, 1rem = 10px. Pin to 10px so the icon
     * fits proportionally inside the 20px button. */
    font-size: 10px !important;
    padding: 0 !important;
    border-radius: 4px !important;  /* 0.375rem × 10px root = 3.75px in reference */
}
.p-datepicker table {
    margin: 5px 0 !important;
    /* Table font-size: 1rem = 14px at our root vs 10px at reference's 10px root.
     * Fix so date numbers scale consistently with the 25px cell size. */
    font-size: 10px !important;
}
.p-datepicker table th {
    padding: 5px !important;
}
.p-datepicker table th > span {
    width: 25px !important;   /* 2.5rem × 10px Bootstrap 3 root = 25px */
    height: 25px !important;
    line-height: 25px !important;
}
.p-datepicker table td {
    padding: 5px !important;
}
.p-datepicker table td > span {
    width: 25px !important;   /* 2.5rem × 10px Bootstrap 3 root = 25px */
    height: 25px !important;
    line-height: 25px !important;
}
.p-datepicker .p-timepicker {
    font-size: 10px !important;
}
.p-datepicker .p-timepicker button {
    font-size: 10px !important;
}

/* -----------------------------------------------------------------------
 * Enquiry-screen GL Account multiselect height cap
 *
 * BaseEnquiryScreen.vue scoped CSS has height: 100% on .enquiry-multiselect
 * which in Bootstrap 5 flex containers stretches to fill the entire row
 * height. Override until the yarn build picks up the Vue-side fix.
 * ----------------------------------------------------------------------- */
.enquiry-multiselect.p-multiselect.p-inputwrapper-filled,
.enquiry-multiselect.p-multiselect-chip.p-inputwrapper-filled {
    height: 34px !important;
    overflow: hidden !important;
}
/* Chip-mode multiselects use auto height so selected chip tokens remain visible.
 * The more-specific chip selector overrides the 34px rule above. */
.enquiry-multiselect.p-multiselect-chip.p-inputwrapper-filled {
    height: auto !important;
    overflow: visible !important;
}

/* -----------------------------------------------------------------------
 * DetailsView event details - side-by-side label/value layout
 *
 * Pre-build: the v-for wrapper div has no class, so col-xs-4/col-xs-8
 * have no width in Bootstrap 5 at viewport > 575px and the divs stack.
 * Make each wrapper flex so label and value sit side-by-side.
 * :not(.row) excludes the header .row and the post-build .row.g-0 rows,
 * keeping Bootstrap 5 col-4/col-8 grid untouched after yarn build runs.
 * ----------------------------------------------------------------------- */
.vertically-scroll-able > div > div:not(.row) {
    display: flex;
    flex-wrap: nowrap;
}
.vertically-scroll-able > div > div:not(.row) > .event-field-name {
    flex: 0 0 40%;
    max-width: 40%;
}
.vertically-scroll-able > div > div:not(.row) > .event-field-value {
    flex: 1;
    white-space: nowrap;
    min-width: 0;
}

/* -----------------------------------------------------------------------
 * DetailsView header row (Type / value): col-md-2 and col-md-10 are direct
 * children of the v-if div in the pre-build (no .row wrapper). The child
 * combinator (> .col-md-2 / > .col-md-10) matches ONLY the pre-build
 * because in the post-build these are nested inside <div class="row">,
 * so the selector won't reach them and Bootstrap 5 flex handles them.
 * ----------------------------------------------------------------------- */
.vertically-scroll-able > div > .col-md-2 {
    display: inline-block;
    width: 33%;
    vertical-align: top;
}
.vertically-scroll-able > div > .col-md-10 {
    display: inline-block;
    width: 65%;
    vertical-align: top;
}

/* Give the DetailsView content a min-width so the horizontal scrollbar
 * appears naturally when the vertical scrollbar is present (the vertical
 * scrollbar takes ~17px, pushing the content beyond the min-width). */
.vertically-scroll-able > div {
    min-width: 260px;
}

/* -----------------------------------------------------------------------
 * DetailsView event-field value column text alignment
 *
 * DetailsView.vue had text-right on the value column which pushes values
 * to the far right edge. The Vue fix (removing text-right) needs a yarn
 * build to take effect — override via external CSS until then.
 * Also covers the header right column (col-md-10 text-right text-muted).
 * ----------------------------------------------------------------------- */
.event-field-value {
    text-align: left !important;
}
#eventDetailsContainer .text-right,
#insEventDetailsView .text-right {
    text-align: left !important;
}

/* -----------------------------------------------------------------------
 * PrimeVue Steps number circle
 * theme.css: min-width/height/line-height: 2rem
 * 2rem = 28px at our root; reference had 20px.
 * ----------------------------------------------------------------------- */
.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
    min-width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
}

/* -----------------------------------------------------------------------
 * PrimeVue dialog / form field padding reduction
 *
 * CruDialog uses .p-field.p-p-3 for each form field. PrimeFlex .p-p-3 sets
 * padding: 1rem = 14px at our root size. The reference server had a smaller
 * root size so fields were more compact. Reduce padding to make the dialog
 * form more compact and closer to the reference appearance.
 * ----------------------------------------------------------------------- */
.p-dialog .p-field {
    padding: 0.5rem !important;
}
.p-tabview .p-tabview-panels {
    padding: 0.75rem !important;
}

/* -----------------------------------------------------------------------
 * PrimeVue dialog title font-size
 *
 * theme.css sets .p-dialog-title { font-size: 1.7rem }. At our
 * html { font-size: 14px } that resolves to 23.8px — much larger than the
 * reference server (html { font-size: 10px }) where it was 17px.
 * Pin to the reference pixel value so the dialog header matches.
 * ----------------------------------------------------------------------- */
.p-dialog .p-dialog-header .p-dialog-title {
    font-size: 17px !important;
}

/* -----------------------------------------------------------------------
 * PrimeVue small button font-size restoration
 *
 * .p-component { font-size: 1rem !important } above overrides PrimeVue's
 * own .p-button.p-button-sm { font-size: 12px } because !important beats
 * a higher-specificity non-important rule. Explicitly restore the small
 * button size so action buttons (Stop Run, Stats, etc.) stay compact.
 * ----------------------------------------------------------------------- */
.p-button.p-button-sm {
    font-size: 12px !important;
    padding: 1px 5px !important;
    line-height: 1.5 !important;
    border-radius: 3px !important;
    /* PrimeVue buttons are display:inline-flex and default to flex-shrink:1
     * when placed inside a flex container (e.g. .p-d-flex.p-jc-end action bars).
     * Combined with PrimeVue's overflow:hidden on .p-button, a shrunk button
     * clips its own label text ("Download To Excel" → "Download To Exc").
     * Prevent shrinking so the button always shows its full label. */
    flex-shrink: 0 !important;
}
/* Apply the same protection to all PrimeVue buttons inside action bar divs */
.p-button {
    flex-shrink: 0 !important;
}

/* -----------------------------------------------------------------------
 * Dropdown sub-sub-menu direction fix
 *
 * Bootstrap 5's Popper.js adds inline style="transform: translate(...)" to
 * .dropdown-menu elements when data-bs-toggle="dropdown" is active, which
 * moves sub-sub menus below their parent item instead of to the right.
 * CSS !important overrides inline styles, restoring left:100% positioning.
 * ----------------------------------------------------------------------- */
.dropdown-submenu > .dropdown-menu {
    position: absolute !important;
    top:       0 !important;
    left:      100% !important;
    margin-top: -6px !important;
    transform: none !important;
}

/* Bootstrap 5 renders .dropdown-toggle::after as a border-based down-pointing
 * triangle (border-top: .3em solid). menus.ftl's inline CSS overrides the
 * content to "ᐅ" (higher specificity) but does NOT clear the Bootstrap 5
 * borders, causing a dash/line to appear above the arrow character.
 * Reset the borders here so the ::after only shows the "ᐅ" character. */
.dropdown-submenu .dropdown-toggle::after {
    border: none !important;
    margin-left: 0 !important;
    vertical-align: middle !important;
}