/*
 * Bootstrap 5 Compatibility Layer
 * Maps BS5 class names to BS3 styling from the theme.
 * Include this AFTER style.css and content*.css
 *
 * -------------------------------------------------------------------------
 * !important USAGE & CLEANUP NOTES
 * -------------------------------------------------------------------------
 * This file makes heavy use of `!important`. The flag is required (not
 * stylistic) because we are competing against:
 *   1. Bootstrap 5's bundled CSS (loaded after this file in some templates)
 *   2. Third-party libs that ship their own widths/colors via inline styles
 *      or JS (CKEditor v4, Chosen, DataTables, animate.css)
 *   3. Per-account / franchise template overrides loaded after our admin CSS
 *
 * Each block below is grouped by the *legacy concern* it addresses. When
 * the underlying legacy markup or third-party lib is removed, the entire
 * grouped block can be deleted. Look for a "SAFE TO REMOVE WHEN:" comment
 * at the top of each high-risk override block.
 *
 * Categories of overrides (rough cleanup priority, low → high effort):
 *   - BS3 utility classes (.hidden, .center-block, .pull-left/right, .well,
 *     .page-header, .btn-group-justified, .dl-horizontal): safe to drop
 *     once those classes are scrubbed from PHP/HTML and replaced with the
 *     BS5 equivalents (.d-none, .mx-auto, .float-start/end, .card, etc.).
 *   - Glyphicon → Font Awesome shims: drop once all `.glyphicon-*` markup
 *     is migrated to `<i class="fa fa-*">`.
 *   - BS3 col-md-* float-grid compat: drop once every col-md-* sits inside
 *     a .row flex parent (the BS5 contract).
 *   - .modal-dialog / .modal-content hard-fallbacks: drop once every
 *     legacy per-account/franchise template loads the BS5 bundle (today
 *     some still ship only BS3 bootstrap.css).
 *   - CKEditor v4 width overrides (.cke_reset, .qelayout .cke*): drop
 *     when CKEditor v4 is replaced or its skin CSS is forked. See the
 *     dedicated comment block above the .cke_reset rule for details.
 *   - Chosen z-index / overflow shims: drop when Chosen is replaced with
 *     a BS5-native multi-select.
 *
 * If you remove a block, run a smoke test of: Library (Q-naires, Templates,
 * Import), Hires + Jobs detail pages, the texting modal, and at least one
 * legacy job-board template (e.g. cyclonedrilling) to confirm nothing
 * regresses.
 */

/* ============================================= */
/* col-form-label (was .control-label)           */
/* ============================================= */
.form-horizontal .col-form-label {
    margin-bottom: 0;
    padding-right: 10px;
    padding-top: 7px;
    white-space: normal;
    text-align: right;
}

label.col-form-label {
    text-align: right;
}

.form-horizontal.form-bordered .form-group > .col-form-label {
    padding: 22px 15px 15px;
    border-right: 1px solid #eee;
    margin-right: -1px;
}

/* Restore BS3 .control-label behavior */
.control-label {
    display: table;
    font-weight: normal !important;
    text-align: left !important;
    clear: both;
}

/* Section headers (.sectionhead) should always span the full width of
 * their container, matching BS3 behavior. In BS5 these end up as flex
 * items inside .form-group / .row containers and would otherwise size
 * to content. */
h4.sectionhead,
.sectionhead {
	display: block !important;
	width: 100% !important;
	flex: 0 0 100% !important;
	box-sizing: border-box;
}

/* CK Editor global fix: override editor_gecko.css width:auto with 100% width.
 * .cke_reset is the main wrapper class applied to the .cke div by CKEditor.
 * The third-party CKEditor CSS sets width:auto; we need to override this
 * globally so the editor fills available width everywhere, not just in qelayout. */
/* =========================================================================
 * CK Editor full-width overrides
 * -------------------------------------------------------------------------
 * MAINTENANCE NOTE: These rules stack 15+ `!important` declarations to win
 * against CKEditor v4's own skin CSS (editor_gecko.css), which sets
 * `.cke_reset { width: auto }` and applies inline pixel widths to inner
 * chrome spans (.cke, .cke_chrome, .cke_inner, .cke_top/_bottom/_contents,
 * .cke_wysiwyg_frame). The cascade of !important is required because
 * CKEditor injects width values directly via JS at runtime — plain CSS
 * cannot override those without !important.
 *
 * SAFE TO REMOVE WHEN:
 *   - CKEditor v4 is replaced (e.g. with CKEditor v5 / TinyMCE / a modern
 *     contenteditable wrapper) and no longer ships .cke_* classes, OR
 *   - CKEditor's own stylesheet is updated/forked to use width:100% on
 *     .cke_reset by default.
 * If CKEditor itself ships updated styles, expect to debug here first —
 * delete the entire `.cke_reset` + `.qelayout .cke*` block below and
 * re-test the questionnaire layout (Library → Questionnaires → edit).
 * ========================================================================= */
.cke_reset {
	width: 100% !important;
}

/* CK Editor in questionnaire layouts should extend full width of container.
 * .cke_reset is the main wrapper class applied to the .cke div by CKEditor,
 * so targeting it ensures the editor fills the available width. */
.qelayout .cke_reset {
	width: 100% !important;
	clear: both;
}

/* Ensure all internal CK Editor elements also respect full width */
.qelayout textarea,
.qelayout textarea[name] {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
}

.qelayout .cke {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	float: none !important;
	clear: both !important;
}

.qelayout .cke_chrome {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.qelayout .cke_inner {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.qelayout .cke_top,
.qelayout .cke_bottom,
.qelayout .cke_contents,
.qelayout .cke_wysiwyg_frame {
	width: 100% !important;
	box-sizing: border-box !important;
}
/* END CKEditor full-width overrides ====================================== */


/* Questionnaire layout: force the answer (e.g. <strong>) to display on a
 * new line below the label, matching legacy BS3 behavior. The label is
 * user-authored markup inside `.qelayout` (rendered by
 * QuestionnairesHelper::get_layout) so we can't change the HTML itself. */
/* Exclude .radio-inline / .checkbox-inline so questionnaire forms that
 * render inline radio/checkbox labels keep their `display: inline-flex`
 * layout. Without the :not() guards, this rule's higher specificity
 * (2 classes + 1 element) would clobber the single-class .radio-inline
 * rule and force inline options onto separate lines. */
.qelayout .form-group .control-label,
.qelayout .form-group label:not(.radio-inline):not(.checkbox-inline) {
    display: block !important;
    width: 100%;
    float: none;
    text-align: left !important;
    clear: both;
}

@media (min-width: 768px) {
    .control-label {
        text-align: right !important;
        margin-bottom: 0;
        padding-top: 7px;
    }
}

.has-success .col-form-label,
.has-success .form-text,
.has-success .radio,
.has-success .checkbox {
    color: #468847;
}

.has-warning .col-form-label,
.has-warning .form-text,
.has-warning .radio,
.has-warning .checkbox {
    color: #c09853;
}

.has-error .col-form-label,
.has-error .form-text,
.has-error .radio,
.has-error .checkbox {
    color: #b94a48;
}

.theme-panel .col-form-label {
    line-height: 30px;
}

.theme-panel .col-form-label.double-line {
    line-height: 16px;
}

/* ============================================= */
/* float-start / float-end (was .pull-left/right)*/
/* ============================================= */
.float-start {
    float: left !important;
}

.float-end {
    float: right !important;
}

/* ============================================= */
/* btn-secondary (was .btn-default)              */
/* Restore the BS3 .btn-default appearance       */
/* ============================================= */
.btn.btn-secondary,
.btn-secondary {
    color: #fff;
    background: #b6c2c9;
    border-color: #b6c2c9;
    --bs-btn-color: #fff;
    --bs-btn-bg: #b6c2c9;
    --bs-btn-border-color: #b6c2c9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #929ba1;
    --bs-btn-hover-border-color: #929ba1;
    --bs-btn-focus-shadow-rgb: 155,164,170;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #929ba1;
    --bs-btn-active-border-color: #929ba1;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #b6c2c9;
    --bs-btn-disabled-border-color: #b6c2c9;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.btn.btn-secondary.active,
.open .dropdown-toggle.btn.btn-secondary {
    color: #fff;
    background: #929ba1;
    border-color: #929ba1;
}

.btn-group .btn.btn-secondary:not(.active) + .btn.btn-secondary,
.input-group-btn .btn.btn-secondary:not(.active) + .btn.btn-secondary {
    border-left-color: #929ba1;
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
}

/* ============================================= */
/* Badge classes (was .label .label-*)           */
/* ============================================= */
.badge {
    display: inline-block;
    padding: 5px 10px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.badge.bg-secondary {
    background-color: #b4b6b7 !important;
    padding: 5px 10px !important;
}

.badge.bg-primary {
    background-color: #428bca !important;
}

.badge.bg-success {
    background-color: #00acac !important;
}

.badge.bg-danger {
    background-color: #ff5b57 !important;
}

.badge.bg-warning {
    background-color: #f59c1a !important;
}

.badge.bg-info {
    background-color: #49b6d6 !important;
}

.badge.bg-dark {
    background-color: #2d353c !important;
}

/* ============================================= */
/* form-text (was .help-block)                   */
/* ============================================= */
.form-text {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

/* ============================================= */
/* img-fluid (was .img-responsive)               */
/* ============================================= */
.img-fluid {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ============================================= */
/* visually-hidden (was .sr-only)                */
/* ============================================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================= */
/* btn-close (was .close)                        */
/* ============================================= */
/* Render the close button as a small, shadowed text × (matches the
 * legacy BS3 .close glyph). We deliberately clear the BS5 inline-SVG
 * background so we don't end up with two stacked X's. */
.btn-close {
    float: right !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #000 !important;
    text-shadow: 0 1px 0 #fff !important;
    filter: alpha(opacity=20);
    opacity: .2 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    box-sizing: content-box !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-right: 5px !important;
}

/* If the legacy markup omits a child × glyph, inject one so the button
 * is visible (BS5 normally renders an SVG background which we cleared
 * above). */
.btn-close:empty::before {
    content: "\00d7";
}

.btn-close:hover,
.btn-close:focus {
    color: #000 !important;
    text-decoration: none !important;
    opacity: .5 !important;
}

/* ============================================= */
/* Responsive display utilities (BS5 style)      */
/* ============================================= */
/* d-none d-sm-block (was hidden-xs) */
/* d-sm-none d-md-block (was hidden-sm) */
/* d-block d-sm-none (was visible-xs) */
/* These are handled by Bootstrap 5's utility classes natively */

/* ============================================= */
/* flex-column (was .nav-stacked)                */
/* ============================================= */
.nav.flex-column > li {
    float: none;
}

.nav.flex-column > li + li {
    margin-top: 2px;
    margin-left: 0;
}

/* ============================================= */
/* navbar-toggler (was .navbar-toggle)           */
/* ============================================= */
.navbar-toggler {
    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;
}

/* ============================================= */
/* navbar-light (was .navbar-default)            */
/* ============================================= */
.navbar-light .navbar-nav > li > a {
    color: #777;
}

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

/* ============================================= */
/* Modal Backdrop Opacity                        */
/* ============================================= */
.modal-backdrop {
    --bs-backdrop-opacity: 0.5;
}
.modal-backdrop.show {
    opacity: 0.5 !important;
}

/* ============================================= */
/* BS3 → BS5 .fade opacity fix                   */
/* BS3 ships `.fade { opacity: 0 } / .fade.in { opacity: 1 }`. BS5 ships
 * `.fade { opacity: 0 } / .fade.show { opacity: 1 }`. When the BS3
 * stylesheet wins source order on legacy custom job-board templates
 * (cyclonedrilling et al.), the BS3 `.fade { opacity: 0 }` rule applies
 * but the matching `.fade.in` rule never matches because BS5 toggles
 * `.show`, not `.in`. The modal element itself ends up at opacity 0,
 * making the entire dialog invisible (child opacity 1 × parent 0 = 0)
 * even though everything else (z-index, position, dimensions) is correct.
 *
 * Force opacity 1 whenever BS5 has marked the element shown.
 * NOTE: Exclude `.modal-backdrop` — it intentionally renders at partial
 * opacity (see the `.modal-backdrop.show` rule above). */
.fade.show:not(.modal-backdrop),
.modal.fade.show,
.modal.show,
.alert.fade.show {
    opacity: 1 !important;
}
/* ============================================= */
/* Bootstrap 3 → 5 modal-dialog visibility fix    */
/* ============================================= */
/*
 * Some legacy/franchise job-board templates still load the old Bootstrap 3
 * stylesheet from /links/bootstrap/all/css/bootstrap.css. That stylesheet
 * applies `.modal.fade .modal-dialog { transform: translate(0, -25%) }` and
 * relies on the BS3-only `.modal.in` class to clear the translate. BS5
 * toggles `.show` (not `.in`) on the modal element, so the dialog stays
 * translated off-screen above its container while the backdrop renders
 * normally — the modal looks like it failed to open.
 *
 * Force the dialog back into view whenever BS5 has marked the modal shown,
 * and make sure the modal element itself is rendered as a block. Apply
 * !important so we win against the BS3 rule regardless of load order.
 */
.modal.show {
    display: block !important;
}
.modal.fade.show .modal-dialog,
.modal.show .modal-dialog {
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
}

/* BS3 set `.modal-backdrop { position: absolute }` which can cause the
 * backdrop to size to its containing block (e.g. a <form> or <td>) instead
 * of the viewport. BS5 expects `position: fixed`. */
.modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1050 !important;
}

/* BS3 → BS5 modal z-index fix.
 * BS3 `bootstrap.css` (still loaded by some legacy per-account / franchise
 * job-board templates, e.g. cyclonedrilling) sets `.modal { z-index: 1040 }`,
 * which is BELOW the BS5 `.modal-backdrop { z-index: 1050 }`. Result: the
 * backdrop renders ON TOP of the modal — the user sees only the dark overlay
 * with no dialog. BS5 expects `.modal { z-index: 1055 }` (above backdrop).
 *
 * Additionally, several legacy job-board templates ship a fixed top header
 * (e.g. `#topbarwrapper`) with its own high z-index that visually covers the
 * dialog when it renders near the top of the viewport. Push the modal stack
 * well above any plausible page chrome so the dialog is always visible.
 */
.modal {
    z-index: 100055 !important;
}
.modal-dialog {
    z-index: 100056 !important;
    position: relative;
}
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade.show {
    z-index: 100050 !important;
}

/* ============================================= */
/* Modal dialog hard fallback (BS5)              */
/* If a legacy per-account template (cyclonedrilling et al.) loads only the
 * BS3 stylesheet and does NOT load the BS5 bundle, `.modal-dialog` has no
 * width/margin and `.modal-content` has no flex/background — the dialog
 * collapses to zero or is painted under the backdrop and the user sees only
 * the overlay. Re-declare the BS5 dialog/content boxes here, with !important
 * so they win against the BS3 rules and any custom theme overrides.
 *
 * NOTE: Do NOT apply `display: flex; align-items: center` to `.modal.show`
 * itself — flex on the scroll container interacts badly with BS5's focus
 * restoration on close and causes the underlying page to scroll-jump to the
 * top after the modal is dismissed. Instead, keep the BS5 default
 * `display: block` on the modal scroll container and center the dialog
 * vertically by giving `.modal-dialog` a flex min-height (the same approach
 * BS5 uses for `.modal-dialog-centered`).
 */
.modal.show {
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
/* Force 600px on every modal-dialog regardless of which stylesheet loads
 * after bs5-compat.css. Use multiple selectors so we win against the
 * BS5 default `@media (min-width: 576px) { .modal-dialog { max-width: 500px } }`
 * even when DataTables or per-account CSS bumps specificity. */
.modal-dialog,
.modal .modal-dialog,
.modal.fade .modal-dialog,
.modal.show .modal-dialog {
    position: relative !important;
    width: auto !important;
    max-width: 600px !important;
    margin: 1.75rem auto !important;
    pointer-events: none;
    transform: none !important;
    /* Vertical centering (BS5 .modal-dialog-centered behavior) without
     * applying flex to .modal itself, which causes scroll-jump-to-top on
     * close. `min-height` keeps tall dialogs scrollable inside the modal. */
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important;
}
.modal-lg .modal-dialog,
.modal .modal-dialog.modal-lg,
.modal-dialog.modal-lg {
    max-width: 800px !important;
}
.modal-xl .modal-dialog,
.modal .modal-dialog.modal-xl,
.modal-dialog.modal-xl {
    max-width: 1140px !important;
}
.modal-sm .modal-dialog,
.modal .modal-dialog.modal-sm,
.modal-dialog.modal-sm {
    max-width: 300px !important;
}
.modal-dialog-centered {
    display: flex !important;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
.modal-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    pointer-events: auto !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    /* No border on .modal-content. A 1px border combined with
     * `overflow: hidden` + border-radius causes the .modal-header's
     * colored background to be clipped to (radius - 1px), exposing a
     * 1px ring of the white .modal-content background at the rounded
     * top corners. That "white fringe / noise" is what users see when
     * a legacy BS3 stylesheet still applies its own border to
     * .modal-content. Drop the border entirely and rely on the
     * box-shadow as the visual edge of the dialog. */
    border: 0 !important;
    border-radius: .5rem !important;
    /* Clip the colored .modal-header background to the rounded
     * corners of .modal-content so it can never paint outside the
     * radius regardless of header radius overrides. */
    overflow: hidden !important;
    outline: 0 !important;
    box-shadow: 0 .25rem 1rem rgba(0,0,0,.5) !important;
}

/* With .modal-content border:0 + overflow:hidden, the parent's
 * border-radius alone clips the header/footer to the full .5rem
 * outer radius — no inner-radius math required, and no 1px white
 * fringe between the header background and the dialog edge. Force
 * the header's own corner radii to match exactly so any per-account
 * theme that hard-coded `border-radius: 0` cannot reintroduce a
 * visible square-cornered band inside the rounded clip. */
.modal-content > .modal-header {
	border-top-left-radius: .5rem !important;
	border-top-right-radius: .5rem !important;
	/* Overshoot the rounded clip by 1px on the top and sides so sub-pixel
	 * rendering at the rounded corners cannot expose the white
	 * .modal-content background as a faint fringe. The parent's
	 * `overflow: hidden` + border-radius clips the overshoot cleanly. */
	margin: -1px -1px 0 -1px !important;
	padding-top: calc(12px + 1px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}
.modal-content > .modal-header .modal-title {
	padding-left: 8px !important;
	flex-grow: 1 !important;
	order: -1 !important;
}
.modal-content > .modal-header .btn-close {
	padding-right: 8px !important;
	flex-shrink: 0 !important;
	margin-left: auto !important;
}
/* Duplicate of the `.modal-content > .modal-header` block above, intentionally
 * kept separate. Targets legacy templates that render `.modal-header` directly
 * without a wrapping `.modal-content` (older modals + a few third-party
 * widgets). The two blocks differ only in that this one omits `order: -1` on
 * `.modal-title` because the title already appears first in the DOM in those
 * templates — reordering would push it to the right.
 *
 * MAINTENANCE: when updating modal header styling, change BOTH blocks. Once
 * all legacy templates are migrated to use `.modal-content > .modal-header`,
 * this block can be deleted. */
.modal-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}
.modal-header .modal-title {
	padding-left: 8px !important;
	flex-grow: 1 !important;
}
.modal-header .btn-close {
	padding-right: 8px !important;
	flex-shrink: 0 !important;
	margin-left: auto !important;
}
.modal-content > .modal-footer {
    border-bottom-left-radius: .5rem !important;
    border-bottom-right-radius: .5rem !important;
    /* Same trick on the bottom edge */
    margin: 0 -1px -1px -1px !important;
    padding-bottom: calc(15px + 1px) !important;
}


/* ============================================= */
/* Modal textarea / form control overflow fix    */
/* ============================================= */
.modal-body textarea,
.modal-body .as-input,
.modal-body select {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
.modal-body table textarea,
.modal-body table .as-input,
.modal-body table select {
    width: auto;
    max-width: 100%;
}

/* ============================================= */
/* input-group-text (BS5 replaces addon)         */
/* ============================================= */
.input-group-text {
    font-size: 12px;
    line-height: 1.5;
    background: #e2e7eb;
    border: none;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}


/* ============================================= */
/* .groupby inline dropdowns (reports page)      */
/* ============================================= */
div.groupby {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}
div.groupby > div {
    flex: 1 1 0;
    padding-left: 0;
    padding-right: 0;
}

/* ============================================= */
/* btn-xs (removed in BS5)                       */
/* ============================================= */
.btn-group-xs > .btn, .btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

/* ============================================= */
/* dl-horizontal (was BS3, removed in BS5)       */
/* ============================================= */
.dl-horizontal {
    display: flex;
    flex-wrap: wrap;
}
.dl-horizontal dt {
    width: 180px;
    text-align: right;
    padding-right: 15px;
    clear: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
    margin-bottom: 5px;
}
.dl-horizontal dd {
    flex: 1;
    margin-left: 0;
    margin-bottom: 5px;
    min-width: calc(100% - 180px);
}

/* Compact dl-horizontal used in the report viewer header.    */
/* Forces the dl to compute to exactly 18px tall (no margins, */
/* line-height 18px on dt/dd).                                */
.dl-report-meta,
.dl-report-meta dt,
.dl-report-meta dd {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 18px;
}

/* ============================================= */
/* Accordion-style panels in the reports editor  */
/* (.panel.panel-default with role="tab" header  */
/* and a .panel-collapse.collapse body).         */
/* ============================================= */
.panel-accordion-item {
    margin-top: 5px;
    margin-bottom: 0;
}
.panel-body-scroll {
    height: 300px;
    overflow-y: scroll;
}

a.accordion-toggle-styled {
    color: #fff;
}

/* ============================================= */
/* BS3 col-md-* global grid (float-based)        */
/* In BS3, col-md-* always had float:left and a  */
/* percentage width regardless of parent. BS5    */
/* requires a .row flex parent. Restore the BS3  */
/* behaviour so col-md-* works everywhere.       */
/* ============================================= */
[class*="col-md-"] {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}
.col-md-1  { width: 8.333333%; }
.col-md-2  { width: 16.666667%; }
.col-md-3  { width: 25%; }
.col-md-4  { width: 33.333333%; }
.col-md-5  { width: 41.666667%; }
.col-md-6  { width: 50%; }
.col-md-7  { width: 58.333333%; }
.col-md-8  { width: 66.666667%; }
.col-md-9  { width: 75%; }
.col-md-10 { width: 83.333333%; }
.col-md-11 { width: 91.666667%; }
.col-md-12 { width: 100%; }

/* ============================================= */
/* BS3 col-* grid compat (float → flexbox)       */
/* In BS3, col-* used float:left and worked      */
/* without a .row parent. In BS5, col-* requires */
/* a flex container parent (.row). These rules    */
/* make .panel-body col-* children float like BS3 */
/* ============================================= */
.panel-body {
    overflow: hidden;
}

/* Chosen dropdowns (.chosen-drop / .chosen-results) are absolutely
 * positioned descendants of `.chosen-container` and render BELOW the
 * select trigger. The `.panel-body { overflow: hidden }` rule above
 * (added to clear floated BS3 col-md-* children) clips that dropdown
 * at the panel's bottom border, hiding the option list.
 *
 * Two complementary fixes:
 *   1. `:has()` selector - lets modern browsers detect a Chosen child
 *      inside any .panel-body / .modal-body and switch overflow to
 *      visible (with a clearfix so floated grid children stay
 *      contained).
 *   2. `.has-chosen` class - HTMLHelper::input_multidropdown() tags
 *      the closest panel/modal/form-group ancestor on init, giving us
 *      the same override on browsers without :has() support.
 *
 * The same clipping issue affects `.chat-include-dropdown` (the
 * "Include Form" / "Include Questionnaire" menu inside the texting
 * modal). Modern browsers match it via the `:has()` selectors below.
 * For browsers without :has() support (Firefox < 121, older enterprise
 * Chromium), a small inline script in SmsmessagingContent::texting_modal()
 * tags the same ancestors with `.has-chat-include` so the fallback
 * selectors below take effect. */
.panel-body:has(.chosen-container),
.modal-body:has(.chosen-container),
.panel-body:has(.chat-include-dropdown),
.modal-body:has(.chat-include-dropdown),
.panel-body.has-chosen,
.modal-body.has-chosen,
.panel-body.has-chat-include,
.modal-body.has-chat-include,
.form-group.has-chosen,
[class*="col-md-"].has-chosen {
    overflow: visible !important;
}
.panel-body:has(.chosen-container)::after,
.modal-body:has(.chosen-container)::after,
.panel-body:has(.chat-include-dropdown)::after,
.modal-body:has(.chat-include-dropdown)::after,
.panel-body.has-chosen::after,
.modal-body.has-chosen::after,
.panel-body.has-chat-include::after,
.modal-body.has-chat-include::after {
    content: "";
    display: table;
    clear: both;
}

/* `.modal-content { overflow: hidden }` is set further up in this file
 * to clip the colored modal-header to the dialog's rounded corners.
 * That same clipping hides the chat-include dropdown when it opens
 * inside the texting modal. Switch the modal-content's overflow back
 * to `visible` whenever it contains a `.chat-include-dropdown`. The
 * rounded-header clip becomes unnecessary in that scenario because the
 * texting modal's header still gets its top-corner radii directly from
 * `.modal-content > .modal-header { border-top-*-radius: .5rem }` —
 * the visible overflow only matters if a child (like our dropdown)
 * needs to paint outside the dialog box. The `.has-chat-include`
 * companion class is the JS-applied fallback for browsers without
 * :has() support. */
.modal-content:has(.chat-include-dropdown),
.modal-content.has-chat-include {
    overflow: visible !important;
}

/* Same clipping problem occurs inside .form-group (display: flex with
 * `align-items: flex-start`) and inside any other ancestor with
 * `overflow: hidden`. Promote .chosen-drop out of the in-flow clip by
 * raising z-index; combined with the panel-body fix above this lets the
 * dropdown render over sibling content rather than being cut off.
 * (Position is already `absolute` from chosen.css.)
 *
 * NOTE: Bootstrap 5 layers modal-backdrop at z-index 1050 and .modal at
 * 1055. A global z-index of 1060 here caused chosen dropdowns on the
 * underlying page to bleed through open modals (PR #1263). Keep the
 * page-level value below the modal-backdrop, and only elevate above the
 * modal stacking context when the chosen control is inside a modal. */
.chosen-container .chosen-drop {
    z-index: 1040;
}

.modal .chosen-container .chosen-drop {
    z-index: 1060;
}

.panel-body > [class*="col-md-"] {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.panel-footer {
    padding: 10px 15px;
}

.modal-body .panel {
    box-shadow: none;
}

.modal-body > [class*="col-md-"] {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

/* Nested col-md-* inside col-md-* (e.g. date range from/to) */
.form-group label.col-form-label[class*="col-md-"] {
    display: block;
    text-align: right;
}
[class*="col-md-"] > [class*="col-md-"] {
    flex: 0 0 auto;
    padding-right: 5px;
    padding-left: 5px;
    box-sizing: border-box;
}
[class*="col-md-"] > .col-md-1  { width: 8.333333%; }
[class*="col-md-"] > .col-md-2  { width: 16.666667%; }
[class*="col-md-"] > .col-md-3  { width: 25%; }
[class*="col-md-"] > .col-md-4  { width: 33.333333%; }
[class*="col-md-"] > .col-md-5  { width: 41.666667%; }
[class*="col-md-"] > .col-md-6  { width: 50%; }
[class*="col-md-"] > .col-md-7  { width: 58.333333%; }
[class*="col-md-"] > .col-md-8  { width: 66.666667%; }
[class*="col-md-"] > .col-md-9  { width: 75%; }
[class*="col-md-"] > .col-md-10 { width: 83.333333%; }
[class*="col-md-"] > .col-md-11 { width: 91.666667%; }
[class*="col-md-"] > .col-md-12 { width: 100%; }

/* ============================================= */
/* .form-group as row (BS3 compat)               */
/* In BS3, .form-group acted as a .row whenever  */
/* it contained col-* children. BS5 dropped this  */
/* behavior — restore it so existing markup that  */
/* relies on a .form-group with .col-md-* labels  */
/* and inputs continues to lay out as a row, even */
/* when not wrapped in .form-horizontal.          */
/* The extra `.form-horizontal .form-group` rule  */
/* further down adds the BS3 negative margins     */
/* only inside form-horizontal contexts. */
/* ============================================= */
.form-group {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 15px;
}
/* Ensure d-none overrides the flex !important rules above */
.form-group.d-none,
.form-horizontal .form-group.d-none {
    display: none !important;
}

.form-group > [class*="col-"] {
    flex: 0 0 auto;
    padding-right: 5px;
    padding-left: 5px;
    box-sizing: border-box;
    /* Establish a block formatting context inside each column so floated
     * descendants are CONTAINED within their column and contribute to the
     * column's height. Without this, repeater patterns like the
     * `<div id="userrow_N">` wrappers used by library/event_add and
     * library/task_add (each holds a single floated col-md-12 child)
     * collapse to height 0, and the dropdowns inside them paint OUTSIDE
     * the column — overlapping the next form-row and the next panel.
     * `display: flow-root` is the modern, side-effect-free clearfix that
     * matches what the BS3-era float-based layout did implicitly via
     * `.col-md-X` itself being a float (a float establishes a BFC). The
     * issue only surfaced under `.form-horizontal` because there
     * `.form-group { display: flex }` makes the column a flex item rather
     * than a float, removing the implicit BFC. */
    display: flow-root;
}
.form-group > .col-md-1  { width: 8.333333% !important; }
.form-group > .col-md-2  { width: 16.666667% !important; }
.form-group > .col-md-3  { width: 25% !important; }
.form-group > .col-md-4  { width: 33.333333% !important; }
.form-group > .col-md-5  { width: 41.666667% !important; }
.form-group > .col-md-6  { width: 50% !important; }
.form-group > .col-md-7  { width: 58.333333% !important; }
.form-group > .col-md-8  { width: 66.666667% !important; }
.form-group > .col-md-9  { width: 75% !important; }
.form-group > .col-md-10 { width: 83.333333% !important; }
.form-group > .col-md-11 { width: 91.666667% !important; }
.form-group > .col-md-12 { width: 100% !important; }

/* ============================================= */
/* Table striped rows & border colors            */
/* Override BS5 defaults and any conflicting rules*/
/* ============================================= */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th,
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f0f3f5 !important;
    --bs-table-striped-bg: #f0f3f5;
}
.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th,
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #fff !important;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-color: #e2e7eb !important;
}
.table {
    border-color: #e2e7eb !important;
    --bs-table-border-color: #e2e7eb;
}
.table-bordered {
    border-color: #e2e7eb !important;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
    border-color: #e2e7eb !important;
}
.dataTables_scroll {
    border-left: 1px solid #e2e7eb !important;
    border-right: 1px solid #e2e7eb !important;
    border-bottom: 1px solid #e2e7eb !important;
}
.reporttable .oddrow td {
    background-color: #f0f3f5 !important;
}

/* ============================================= */
/* input-group-addon (BS3 → BS5 input-group-text)*/
/* ============================================= */
.input-group-addon {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    background: #e2e7eb;
    border: none;
    display: flex;
    align-items: center;
}
.input-group-addon .input-group-text {
    font-size: 12px;
    line-height: 1.5;
    background: #e2e7eb;
    border: none;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ============================================= */
/* .well (BS3, removed in BS5)                   */
/* ============================================= */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.well-sm {
    padding: 9px;
    border-radius: 3px;
}
.well-lg {
    padding: 24px;
    border-radius: 6px;
}

/* ============================================= */
/* .radio-inline / .checkbox-inline (BS3 → BS5)  */
/* ============================================= */
.radio-inline,
.checkbox-inline {
	display: inline-flex;
	align-items: center;
	padding-left: 0;
	margin-right: 10px;
	font-weight: normal;
	cursor: pointer;
	gap: 4px;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
	margin-left: 10px;
}

/* Radio buttons group styling */
.radio-buttons-group {
	padding-top: 7px !important;
}


/* ============================================= */
/* .btn-group-justified (BS3, removed in BS5)    */
/* ============================================= */
.btn-group-justified {
    display: flex;
    width: 100%;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
    flex: 1;
}

/* ============================================= */
/* .page-header (BS3, removed in BS5)            */
/* ============================================= */
.page-header {
    padding-bottom: 0px;
    margin: 0 0 10px;
    border-bottom: none;
}

/* ============================================= */
/* .hidden (BS3, use .d-none in BS5)             */
/* ============================================= */
.hidden {
    display: none !important;
}


/* ============================================= */
/* .center-block (BS3, use mx-auto d-block in BS5)*/
/* ============================================= */
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================= */
/* .form-horizontal (BS3, removed in BS5)        */
/* ============================================= */
.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}
.form-horizontal .col-form-label {
    text-align: right;
    align-self: flex-start;
    padding-top: 7px;
}

/* style.css declares:
 *   .form-horizontal { display: flex; flex-wrap: wrap; flex-direction: column; }
 * to lay out a form-horizontal's children (panels, etc.) vertically.
 * On views like library/event_add the form ITSELF carries .form-horizontal
 * and contains sibling .panel children (Event Information, Scheduling,
 * User Feedback). When some other stylesheet/specificity wins and
 * `flex-direction: column` is dropped, the panels lay out as flex ROW
 * items and end up rendered side-by-side instead of stacking. Re-assert
 * the column direction and force direct .panel children to full width
 * here so the BS5 compat layer guarantees the stack regardless of load
 * order. */
.form-horizontal {
    display: flex;
    flex-direction: column !important;
    flex-wrap: wrap;
    align-items: stretch;
}
.form-horizontal > .panel,
.form-horizontal > form > .panel {
    width: 100%;
    flex: 0 0 auto;
}

/* ============================================= */
/* Glyphicon → Font Awesome mappings             */
/* ============================================= */
.glyphicon {
    display: inline-block;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    font-style: normal;
    font-size: inherit;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.glyphicon-plus:before { content: "\f067"; }
.glyphicon-minus:before { content: "\f068"; }
.glyphicon-exclamation-sign:before { content: "\f06a"; }
.glyphicon-info-sign:before { content: "\f05a"; }
.glyphicon-check:before { content: "\f14a"; }
.glyphicon-unchecked:before { content: "\f0c8"; }
.glyphicon-upload:before { content: "\f093"; }
.glyphicon-ban-circle:before { content: "\f05e"; }
.glyphicon-trash:before { content: "\f1f8"; }
.glyphicon-phone:before { content: "\f095"; }
.glyphicon-ok:before { content: "\f00c"; }
.glyphicon-remove:before { content: "\f00d"; }
.glyphicon-chevron-left:before { content: "\f053"; }
.glyphicon-chevron-right:before { content: "\f054"; }
.glyphicon-chevron-up:before { content: "\f077"; }
.glyphicon-chevron-down:before { content: "\f078"; }
.glyphicon-search:before { content: "\f002"; }
.glyphicon-envelope:before { content: "\f0e0"; }
.glyphicon-star:before { content: "\f005"; }
.glyphicon-star-empty:before { content: "\f006"; }
.glyphicon-user:before { content: "\f007"; }
.glyphicon-cog:before { content: "\f013"; }
.glyphicon-lock:before { content: "\f023"; }
.glyphicon-time:before { content: "\f017"; }
.glyphicon-calendar:before { content: "\f073"; }
.glyphicon-download:before { content: "\f019"; }
.glyphicon-download-alt:before { content: "\f019"; }
.glyphicon-list:before { content: "\f03a"; }
.glyphicon-pencil:before { content: "\f303"; }
.glyphicon-file:before { content: "\f15b"; }
.glyphicon-refresh:before { content: "\f021"; }
.glyphicon-warning-sign:before { content: "\f071"; }
.glyphicon-question-sign:before { content: "\f059"; }
.glyphicon-link:before { content: "\f0c1"; }
.glyphicon-eye-open:before { content: "\f06e"; }
.glyphicon-eye-close:before { content: "\f070"; }
.glyphicon-off:before { content: "\f011"; }
.glyphicon-heart:before { content: "\f004"; }
.glyphicon-home:before { content: "\f015"; }
.glyphicon-comment:before  { content: "\f075"; }  /* fa-comment */
.glyphicon-transfer:before { content: "\f362"; }  /* fa-exchange-alt / fa-right-left */

/* ============================================= */
/* Stage-change dropdown (CandidatesHelper,      */
/* JobHelper, WorkflowHelper). Scoped via the    */
/* .stage-change-group wrapper class so these    */
/* rules don't bleed into every .btn-danger or   */
/* .dropdown-menu on the page.                   */
/* ============================================= */
.stage-change-group a[id^="stage_dialog_"] {
    display: block !important;
    width: 100% !important;
    padding: 5px 15px !important;
    color: #333 !important;
    text-decoration: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}
/* Match the legacy inline `style="display:block;width:100%"` previously
 * applied to each <li> wrapper in the stage-change dropdown so the menu
 * items keep filling the dropdown's full width after the inline styles
 * were removed from CandidatesHelper / JobHelper / WorkflowHelper. */
.stage-change-group .dropdown-menu > li {
    display: block;
    width: 100%;
}
.stage-change-group a[id^="stage_dialog_"]:hover,
.stage-change-group a[id^="stage_dialog_"]:focus {
    color: #333 !important;
    background-color: #edf0f5 !important;
    text-decoration: none !important;
}
.stage-change-group .dropdown-menu {
    padding: 5px 0 !important;
}
/* Align the dropdown under the green (Set Stage) button — left edge of
   the menu matches the left edge of the btn-group. Also neutralize any
   Popper-applied transform/inset from BS5 JS. */
.stage-change-group.btn-group > .dropdown-menu,
.stage-change-group .btn-group > .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    top: 100% !important;
    bottom: auto !important;
    transform: none !important;
    inset: 100% auto auto 0 !important;
    margin: 2px 0 0 0 !important;
}
/* Scoped knockout/danger button sizing — matches .btn-xs. Applies to
   .btn-danger inside the wrapper or to a knockout button that carries
   the .stage-change-group class itself. */
.stage-change-group .btn-danger,
.stage-change-group.btn-danger {
    padding: 1px 5px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-radius: 3px !important;
}

/* ============================================= */
/* Import Template Checkbox Styling             */
/* ============================================= */
.import-template-checkbox {
	margin-bottom: 12px !important;
	padding-right: 20px !important;
	display: block;
}

.import-template-checkbox label {
	font-weight: 300 !important;
	margin-bottom: 0 !important;
}

/* Select dropdown chevron for Texting Compliance page.
 * The selects on this page use .form-control (not .form-select),
 * so the BS5 chevron background-image isn't applied. Earlier in this
 * file the global `select` rule clears border-radius and sets padding
 * but does not paint a chevron, leaving these dropdowns with no caret.
 * Scope the chevron to #texting-billing-wrapper so we don't affect
 * other dropdowns elsewhere in the app. */
#texting-billing-wrapper select,
#texting-billing-wrapper select.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") !important;
	background-repeat: no-repeat !important;
	background-position: right 8px center !important;
	background-size: 12px 9px !important;
	padding-right: 26px !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* ============================================= */
/* Date picker full width                       */
/* ============================================= */
#mainform.job_create_edit .date-picker {
    width: 100% !important;
    display: flex !important;
}

#mainform.job_create_edit .date-picker .form-control {
	flex: 1 !important;
}