/* Intentionally left minimal for report params legacy-layout parity.
   Layout and spacing are driven by avenger.css classes (margin35, form-group row, control-label, help-block). */

/* CSP Compliance: Override Bootstrap 5 btn-close to use local SVG instead of inline data URI to avoid CSP violations.
   Bootstrap 5 uses data: URIs which violate strict Content Security Policies; use local SVG file instead. */
.btn-close {
   background-image: url('../images/close-icon.svg');
   background-size: 1em 1em;
}

/* Keep the calendar trigger keyboard and pointer affordances visible. */
.rdp-date-picker-icon {
   cursor: pointer;
}

/* Month/year fallback trigger stays outside the input group, matching the
   pre-migration layout and avoiding native-control repaint issues. */
.controls.rdp-monthyear-controls {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.35rem;
}

.controls.rdp-monthyear-controls > .input-group {
   flex: 1 1 auto;
   width: auto !important;
   min-width: 0;
}

.controls.rdp-monthyear-controls > .rdp-monthyear-trigger {
   flex: 0 0 auto;
   margin-left: 0;
   align-self: stretch;
   height: auto;
   border: 1px solid #dee2e6;
   border-color: #dee2e6;
   border-radius: 0.375rem;
   background-color: #fff;
   padding: 0.125rem 0.25rem;
}

.controls.rdp-monthyear-controls > .text-danger {
   flex-basis: 100%;
}

/* Optional utility class for content-based width single-select controls. */
.form-select-content-fit {
   width: auto;
   max-width: 100%;
   min-width: 10rem;
   display: inline-block;
}

/* Product config toggle fix: BS5 input-group sets .btn { position: relative; }
   which overrides bootstrap-toggle's absolute-positioned inner labels at leaf levels.
   Keep this in the BS5 compatibility layer instead of the shared bootstrap override. */
.toggle .toggle-group .toggle-on.btn,
.toggle .toggle-group .toggle-off.btn {
   position: absolute;
}

/* Account settings left-menu (BS5): centralized active/hover styles.
   Scope is intentionally narrow (#account_container .navs) so non-account pages are unaffected. */
#account_container .navs .nav-link {
   color: var(--bs-link-color);
   text-decoration: none;
   transition: color 0.2s ease, background-color 0.2s ease;
}

#account_container .navs .nav-link:hover,
#account_container .navs .nav-link:focus {
   color: var(--bs-link-hover-color);
   text-decoration: none;
   background-color: rgba(var(--bs-link-color-rgb), 0.08);
}

#account_container .navs .nav-item.active .nav-link,
#account_container .navs .nav-link.active {
   color: var(--bs-light);
   background-color: var(--bs-link-color);
   text-decoration: none;
}

#account_container .navs .nav-item.active .nav-link:hover,
#account_container .navs .nav-item.active .nav-link:focus,
#account_container .navs .nav-link.active:hover,
#account_container .navs .nav-link.active:focus {
   color: var(--bs-light);
   background-color: var(--bs-link-hover-color);
}

#account_container .navs .nav-item.disabled .nav-link {
   color: var(--bs-link-color);
   text-decoration: none;
   pointer-events: none;
   cursor: default;
}

/* BS5 input-group sets .form-select to flex: 1 1 auto and width: 1%.
   For content-fit selects, opt out so measured width is respected and arrow area is not clipped. */
.input-group > .form-select-content-fit {
  flex: 0 0 auto;
  width: auto;
}

/* Project baseline: keep select control typography consistent with legacy 12px sizing.
   TODO(bs5-migration): narrow/remove the legacy-compatible 12px baseline once all JSP/tag controls are fully BS5-native. */
select,
select.form-control,
select.form-select {
    font-size: 12px;
    line-height: 1.2;
}

/* BS5 compact select padding (3px 6px) can overlap text with the arrow on legacy
   selectWidthAuto controls. Keep content-fit width but reserve a right-side arrow gutter. */
select.form-select.selectWidthAuto:not([multiple]):not([size]),
select.form-select.selectWidthAuto:not([multiple])[size=""],
select.form-select.selectWidthAuto:not([multiple])[size="1"],
select.form-control.selectWidthAuto:not([multiple]):not([size]),
select.form-control.selectWidthAuto:not([multiple])[size=""],
select.form-control.selectWidthAuto:not([multiple])[size="1"] {
   width: auto;
   max-width: 100%;
   min-width: 10rem;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: url('../images/dropdown-arrow.svg'), var(--bs-form-select-bg-icon, none);
   background-repeat: no-repeat;
   background-position: right 0.6rem center;
   background-size: 16px 12px;
   padding-right: 2.25rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Utility: compact content-fit single selects that should be narrower than the default 10rem. */
select.form-select.selectWidthAuto.select-min-8rem:not([multiple]),
select.form-control.selectWidthAuto.select-min-8rem:not([multiple]) {
   min-width: 8rem;
}

/* Shared Secrets Company select: preserve legacy extra right-side breathing room via global CSS. */
#frmAddSharedSecret #companyDto\.companyName.form-select.selectWidthAuto:not([multiple]) {
   padding-right: 3.125rem;
}

/* Account search Industry listbox: force multi-row rendering for BS5 .form-select listboxes.
   Keep this class-based so the rule stays tied to BS5 markup, not legacy size attributes. */
#frmSearchCriteria #industryArray.form-select[multiple] {
   height: auto !important;
   min-height: calc(4 * 1.2em + 0.75rem + 2px);
}

/* reportParams.jsp compatibility bridge:
    keep BS5-enabled selects visually close to legacy avenger.css sizing. */
#frmReportParameterPrompting select,
#frmReportParameterPrompting .form-select,
#frmSpoofingActivityReportParameterPrompting select,
#frmSpoofingActivityReportParameterPrompting .form-select,
#frmTransDetailReportParameterPrompting select,
#frmTransDetailReportParameterPrompting .form-select,
#frmItpsEnrollmentStatsReportParameter select,
#frmItpsEnrollmentStatsReportParameter .form-select {
   font-size: 12px;
   line-height: 1.2;
   min-height: 25px;
   padding: 3px 6px;
}

#frmReportParameterPrompting select[multiple],
#frmReportParameterPrompting .form-select[multiple] {
   min-height: 0;
   height: auto;
}

/* reportParams.jsp: keep multi-select controls inside container width. */
#frmReportParameterPrompting #workflows,
#frmReportParameterPrompting #executedWorkflows,
#frmReportParameterPrompting #companies,
#frmReportParameterPrompting #accounts,
#frmReportParameterPrompting #countries,
#frmReportParameterPrompting #products {
   max-width: 100%;
}

/* reportParams.jsp: content-fit width for Company/Account/Workflow list controls. */
#frmReportParameterPrompting #countries,
#frmReportParameterPrompting #products,
#frmReportParameterPrompting #accounts,
#frmReportParameterPrompting #workflows,
#frmReportParameterPrompting #executedWorkflows,
#frmReportParameterPrompting #companies {
   width: auto;
   display: inline-block;
   padding-right: 1.5rem;
}

/* Keep Company readable when option text is short. */
#frmReportParameterPrompting #companies {
   min-width: 270px;
}

/* reportParams.jsp: final spacing/width rhythm polish for BS5 grid wrappers. */
#frmReportParameterPrompting {
   padding-top: 0;
}

#frmReportParameterPrompting .mb-3.row {
   margin-bottom: 0.75rem !important;
   align-items: center;
}

#frmReportParameterPrompting .form-label {
   font-size: 12px;
   line-height: 1.2;
   padding-top: 0.2rem;
   margin-bottom: 0;
}

#frmReportParameterPrompting .form-text {
   margin-top: 0.15rem;
   font-size: 11px;
   line-height: 1.2;
}

#frmReportParameterPrompting .controls {
   max-width: 42rem;
}

#frmReportParameterPrompting .controls .input-group,
#frmReportParameterPrompting .controls .form-select,
#frmReportParameterPrompting .controls .form-control,
#frmSpoofingActivityReportParameterPrompting .controls .input-group,
#frmSpoofingActivityReportParameterPrompting .controls .form-select,
#frmSpoofingActivityReportParameterPrompting .controls .form-control,
#frmTransDetailReportParameterPrompting .controls .input-group,
#frmTransDetailReportParameterPrompting .controls .form-select,
#frmTransDetailReportParameterPrompting .controls .form-control,
#frmItpsEnrollmentStatsReportParameter .controls .input-group,
#frmItpsEnrollmentStatsReportParameter .controls .form-select,
#frmItpsEnrollmentStatsReportParameter .controls .form-control {
   width: 100%;
}

/* Keep content-fit selects compact inside BS5 input-group (Date Range/Timezone and similar). */
#frmReportParameterPrompting .controls .input-group > .form-select-content-fit {
   width: auto;
   flex: 0 0 auto;
}

#frmTransDetailReportParameterPrompting .controls .input-group > .form-select-content-fit {
   width: auto;
   flex: 0 0 auto;
}

#frmSpoofingActivityReportParameterPrompting .controls .input-group > .form-select-content-fit {
   width: auto;
   flex: 0 0 auto;
}

#frmItpsEnrollmentStatsReportParameter .controls .input-group > .form-select-content-fit {
   width: auto;
   flex: 0 0 auto;
}

/* Mode field: content-based width with a 4-row minimum.
   Height is row-derived (size=4) instead of a fixed rem value to stay stable across BS versions. */
#frmReportParameterPrompting #modes {
   width: auto;
   display: inline-block;
   min-height: calc((4 * 1.2em) + (2 * 3px) + 2px);
   padding-right: 1rem;
}

#frmReportParameterPrompting #companies,
#frmReportParameterPrompting #countries,
#frmReportParameterPrompting #products {
   min-height: 8.5rem;
}

/* Account and Workflow fields: minimum height for 2 visible rows with horizontal scrollbar. */
#frmReportParameterPrompting #accounts,
#frmReportParameterPrompting #workflows,
#frmReportParameterPrompting #executedWorkflows {
   min-height: 3.5rem;
}

/* ITPS Enrollment Stats uses the same BS5 listbox behavior as reportParams.jsp. */
#frmItpsEnrollmentStatsReportParameter #companies {
   min-height: 8.5rem;
}

#frmItpsEnrollmentStatsReportParameter #accounts {
   height: auto !important;
   min-height: calc((1 * 1.2em) + (2 * 3px) + 2px);
}

/* Account countries dual-list controls (BS5): keep 12 visible rows for .form-select listboxes.
   Intentionally scoped to BS5 class hooks instead of [multiple][size] attribute selectors. */
#frmAddCountries #excludedCountriesSelect.form-select,
#frmAddCountries #includedCountriesSelect.form-select,
#frmAddCountries #includedConsentCountriesSelect.form-select {
   font-size: 12px;
   line-height: 1.2;
   height: auto !important;
   min-height: calc((12 * 1.2em) + (2 * 3px) + 2px);
   padding: 3px 6px;
}

/* Account Shared Secrets dual-list (BS5): keep Available/Selected Accounts at 4 visible rows.
   Scoped to frmAddSharedSecret to avoid affecting other size=4 listboxes on the page. */
#frmAddSharedSecret #availAcctSharedSecret,
#frmAddSharedSecret #selectedAcctSharedSecret {
   font-size: 12px;
   line-height: 1.2;
   height: auto !important;
   min-height: calc((4 * 1.2em) + (2 * 3px) + 2px);
   padding: 3px 6px;
}

/* reportParams.jsp Date Range only: keep BS5 form-select behavior but limit width to a compact size. */
#frmReportParameterPrompting #timeperiod_div .date-range-select,
#frmReportParameterPrompting #timeperiod.form-select-content-fit,
#frmSpoofingActivityReportParameterPrompting #timeperiod_div .date-range-select,
#frmSpoofingActivityReportParameterPrompting #timeperiod.form-select-content-fit,
#frmItpsEnrollmentStatsReportParameter #timeperiod_div .date-range-select,
#frmItpsEnrollmentStatsReportParameter #timeperiod.form-select-content-fit {
   width: auto;
   max-width: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: url('../images/dropdown-arrow.svg'), var(--bs-form-select-bg-icon, none);
   background-repeat: no-repeat;
   background-position: right 0.6rem center;
   background-size: 16px 12px;
   padding-right: 1.5rem;
}

/* Scoped fallback: restore full BS5 single-select chrome for Date Range.
   The generic legacy select sizing overrides the default BS5 right padding, which can hide the arrow. */
#frmReportParameterPrompting #timeperiod {
   width: auto;
   display: inline-block;
   max-width: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-color: var(--bs-body-bg);
   /*background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); */
   background-image: url('../images/dropdown-arrow.svg'), var(--bs-form-select-bg-icon, none);
   background-repeat: no-repeat;
   background-position: right 0.6rem center;
   background-size: 16px 12px;
   padding-right: 1.5rem;
}

#frmSpoofingActivityReportParameterPrompting #timeperiod {
   width: auto;
   display: inline-block;
   max-width: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-color: var(--bs-body-bg);
   background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
   background-repeat: no-repeat;
   background-position: right 0.6rem center;
   background-size: 16px 12px;
   padding-right: 1.5rem;
}

#frmItpsEnrollmentStatsReportParameter #timeperiod {
   width: auto;
   display: inline-block;
   max-width: 100%;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-color: var(--bs-body-bg);
   background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
   background-repeat: no-repeat;
   background-position: right 0.6rem center;
   background-size: 16px 12px;
   padding-right: 1.5rem;
}

/* DataTables scrollable header styling: apply grey-blue background for visual consistency with modal headers */
.dataTables_scrollHeadInner {
   background-color: #337ab7;
   color: white;
}

.dataTables_scrollHeadInner thead th {
   background-color: #337ab7;
   color: white;
}

/* Application-specific form field sizing - maintain BS4 dimensions after BS5 migration */

/* Password reset form field sizing
   SCOPED TO: input-group containers with .form-control + .input-group-addon pattern in passwordReset.jsp
   TARGET: #oldPassword, #password, #confirmPassword (inside show_hide_* input-group containers)
   NOT AFFECTED: Standalone .form-control fields (firstName, lastName, emailAddress, etc. use direct ID targeting)
   DIMENSIONS: Input 317.882px + Addon 25.4745px = 343.3565px total container width (BS4 original)
   SOLUTION: Shrink FontAwesome icon to fit narrow addon width without overlapping input field */
#show_hide_old_password.input-group,
#show_hide_password.input-group,
#show_hide_confirm_password.input-group {
 width: 343.3565px !important;
 height: 24.9884px !important;
 display: flex !important;
 flex-wrap: nowrap !important;
 gap: 0 !important;
}

/* Form control within password input-group: exact BS4 input width */
#show_hide_old_password.input-group .form-control,
#show_hide_password.input-group .form-control,
#show_hide_confirm_password.input-group .form-control {
 width: 317.882px !important;
 height: 24.9884px !important;
 padding: 2px 4px !important;
 flex: 0 0 auto !important;
 min-width: 0 !important;
}

/* Show/hide password toggle button: BS4 addon width 25.4745px */
#show_hide_old_password.input-group .input-group-addon,
#show_hide_password.input-group .input-group-addon,
#show_hide_confirm_password.input-group .input-group-addon {
 width: 25.4745px !important;
 height: 24.9884px !important;
 padding: 0 !important;
 margin: 0 !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 flex: 0 0 auto !important;
 border: 1px solid #ced4da !important;
 border-left: 0 !important;
 background-color: #f8f9fa !important;
 outline: none !important;
}

#show_hide_old_password.input-group .input-group-addon.is-invalid,
#show_hide_password.input-group .input-group-addon.is-invalid,
#show_hide_confirm_password.input-group .input-group-addon.is-invalid {
 border-color: var(--bs-form-invalid-border-color) !important;
}

/* Show/hide password anchor link: override form-control styling to show icon properly */
#show_hide_old_password.input-group .show-hide-pwd,
#show_hide_password.input-group .show-hide-pwd,
#show_hide_confirm_password.input-group .show-hide-pwd {
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 100% !important;
 height: 100% !important;
 padding: 0 !important;
 margin: 0 !important;
 border: none !important;
 background: none !important;
 color: #333 !important;
 cursor: pointer !important;
 text-decoration: none !important;
}

/* FontAwesome eye icon: shrink to fit narrow 25.4745px addon width */
#show_hide_old_password.input-group .show-hide-pwd i,
#show_hide_password.input-group .show-hide-pwd i,
#show_hide_confirm_password.input-group .show-hide-pwd i {
 font-size: 10px !important;
 color: #333 !important;
 line-height: 1 !important;
}

/* Personal info form field sizing */
#firstName.form-control,
#lastName.form-control,
#emailAddress.form-control,
#phoneNumber.form-control,
#passwordExpirationDate.form-control {
 width: 343.357px !important;
 height: 24.9884px;
 padding: 2px 4px;
}

/* Secure Token field sizing
   SCOPED TO: verifyToken.jsp login page only
   TARGET: #token input field in secure token verification form
   SELECTOR: #token (ID-specific targeting prevents page overlap)
   DIMENSIONS: 148.889px W × 20.9606px H (restored from BS4 version)
   NOT AFFECTED: This only targets the unique #token ID, no other pages use this field */
#token {
 width: 148.889px;
 height: 20.9606px;
 padding: 2px 4px;
}

/* Secure Token label styling - maintain BS4 appearance after BS5 migration
   SCOPED TO: verifyToken.jsp login page only
   TARGET: label for the #token field (secure token verification form)
   SELECTOR: label[for="token"] (unique attribute selector prevents overlap)
   NOT AFFECTED: This selector only targets labels with for="token" attribute, not used on other pages
   FONT SPECS: BS4 legacy styling (Helvetica Neue 12px bold) for consistent login page appearance */
label[for="token"] {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-weight: 700;
}

/* Readonly form control styling - BS4 had white background, restore for BS5 parity */
.form-control[readonly] {
 background-color: #fff;
 opacity: 1;
}
.form-select[readonly] {
 background-color: #fff;
 opacity: 1;
}

/* Password reset profile fields are display-only. */
#frmForgotPassword .form-control[readonly] {
 background-color: #e9ecef;
}

#frmForgotPassword .form-control.is-invalid,
#frmForgotPassword.was-validated .form-control:invalid {
 background-image: none;
 border-color: var(--bs-form-invalid-border-color);
}

#frmForgotPassword .form-control.is-invalid:focus,
#frmForgotPassword.was-validated .form-control:invalid:focus {
 border-color: var(--bs-form-invalid-border-color);
 box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

/* Timezone: content-fit width with right buffer to avoid clipping near control chrome. */
#frmReportParameterPrompting #month_div .input-group,
#frmReportParameterPrompting #year_div .input-group {
   width: auto;
   display: inline-flex;
}

#frmReportParameterPrompting #month,
#frmReportParameterPrompting #month.form-select-content-fit,
#frmReportParameterPrompting #year,
#frmReportParameterPrompting #year.form-select-content-fit,
#frmReportParameterPrompting #timezone,
#frmReportParameterPrompting #timezone.form-select-content-fit,
#frmSpoofingActivityReportParameterPrompting #timezone,
#frmSpoofingActivityReportParameterPrompting #timezone.form-select-content-fit,
#frmTransDetailReportParameterPrompting #timezone,
#frmTransDetailReportParameterPrompting #timezone.form-select-content-fit,
#frmReportParameterPrompting #companyId,
#frmReportParameterPrompting #companyId.form-select-content-fit,
#frmReportParameterPrompting #accountId,
#frmReportParameterPrompting #accountId.form-select-content-fit,
#frmReportParameterPrompting #userStatus,
#frmReportParameterPrompting #userStatus.form-select-content-fit {
   width: auto;
   display: inline-block;
   max-width: 100%;
   padding-right: 1.5rem;
}

/* reportParams.jsp: submit panel spacing with BS5 buttons. */
#frmReportParameterPrompting #submitPanel .btn {
   min-width: 10rem;
}

#frmReportParameterPrompting #submitPanel .btn + .btn {
   margin-left: 0.5rem;
}

#frmReportParameterPrompting #submitPanel {
   padding-top: 0.25rem;
}

/* processTransactionBatch.jsp: keep select controls content-fit and preserve right-side arrow spacing. */
#frmProcessBatch .controls .form-select-content-fit,
#frmProcessBatch .controls .form-select.selectWidthAuto,
#frmProcessBatch .controls .form-control.selectWidthAuto {
   width: auto;
   max-width: 100%;
   display: inline-block;
   padding-right: 1.5rem;
}

/* Micro responsive tuning: relax width constraints on smaller viewports. */
@media (max-width: 992px) {
   #frmReportParameterPrompting .controls {
      max-width: 100%;
   }
}

@media (max-width: 768px) {
   #frmReportParameterPrompting .mb-3.row {
      margin-bottom: 0.75rem !important;
   }

   #frmReportParameterPrompting .form-label {
      padding-top: 0;
      margin-bottom: 0.25rem;
   }

   #frmReportParameterPrompting #submitPanel .btn {
      min-width: 8.5rem;
   }

   #frmReportParameterPrompting #accounts,
   #frmReportParameterPrompting #workflows,
   #frmReportParameterPrompting #executedWorkflows,
   #frmReportParameterPrompting #companies,
   #frmReportParameterPrompting #countries,
   #frmReportParameterPrompting #products {
      width: 100%;
      max-width: 100%;
   }
}

/* BS5 + HTML5 date inputs: keep native in-input calendar indicator visible.
   Scoped to report parameter forms to avoid global side effects. */
#frmReportParameterPrompting input[type="date"],
#frmSpoofingActivityReportParameterPrompting input[type="date"],
#frmItpsEnrollmentStatsReportParameter input[type="date"] {
   -webkit-appearance: auto !important;
   -moz-appearance: auto !important;
   appearance: auto !important;
}

#frmReportParameterPrompting input[type="date"].form-control,
#frmSpoofingActivityReportParameterPrompting input[type="date"].form-control,
#frmItpsEnrollmentStatsReportParameter input[type="date"].form-control {
   -webkit-appearance: auto !important;
   -moz-appearance: auto !important;
   appearance: auto !important;
}

#frmReportParameterPrompting input[type="date"]::-webkit-calendar-picker-indicator,
#frmSpoofingActivityReportParameterPrompting input[type="date"]::-webkit-calendar-picker-indicator,
#frmItpsEnrollmentStatsReportParameter input[type="date"]::-webkit-calendar-picker-indicator {
   opacity: 1 !important;
   display: inline-block !important;
   visibility: visible !important;
   cursor: pointer;
}

/* BS5 + HTML5 month inputs: keep native in-input month indicator visible.
   Uses the same scoped forms as date to avoid global side effects. */
#frmReportParameterPrompting input[type="month"],
#frmSpoofingActivityReportParameterPrompting input[type="month"],
#frmItpsEnrollmentStatsReportParameter input[type="month"] {
   -webkit-appearance: auto !important;
   -moz-appearance: auto !important;
   appearance: auto !important;
}

#frmReportParameterPrompting input[type="month"].form-control,
#frmSpoofingActivityReportParameterPrompting input[type="month"].form-control,
#frmItpsEnrollmentStatsReportParameter input[type="month"].form-control {
   -webkit-appearance: auto !important;
   -moz-appearance: auto !important;
   appearance: auto !important;
}

#frmReportParameterPrompting input[type="month"]::-webkit-calendar-picker-indicator,
#frmSpoofingActivityReportParameterPrompting input[type="month"]::-webkit-calendar-picker-indicator,
#frmItpsEnrollmentStatsReportParameter input[type="month"]::-webkit-calendar-picker-indicator {
   opacity: 1 !important;
   display: inline-block !important;
   visibility: visible !important;
   cursor: pointer;
}

/* Firefox/non-native month fallback: show explicit trigger icon and month/year-only popup. */
#frmReportParameterPrompting .rdp-monthyear-trigger,
#frmSpoofingActivityReportParameterPrompting .rdp-monthyear-trigger,
#frmItpsEnrollmentStatsReportParameter .rdp-monthyear-trigger {
   flex: 0 0 auto;
   min-width: 2.5rem;
   line-height: 1;
}

#frmReportParameterPrompting .rdp-monthyear-trigger-symbol,
#frmSpoofingActivityReportParameterPrompting .rdp-monthyear-trigger-symbol,
#frmItpsEnrollmentStatsReportParameter .rdp-monthyear-trigger-symbol {
   font-size: 1rem;
   display: inline-block;
}

/* Firefox month/year fallback: mirror the native month grid without rendering
   the jQuery UI day calendar first. */
.rdp-monthyear-picker {
   position: absolute;
   z-index: 1050;
   display: none;
   width: min(18rem, calc(100vw - 1rem));
   max-width: calc(100vw - 1rem);
   box-sizing: border-box;
   padding: 0.75rem;
   border: 1px solid #b8b8b8;
   border-radius: 0.25rem;
   background: #fff;
   box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.rdp-monthyear-picker.show {
   display: block;
}

.rdp-monthyear-picker-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 0.5rem;
   padding: 0.4rem;
   background: #0d6efd;
}

.rdp-monthyear-year {
   width: 7rem;
}

.rdp-monthyear-nav,
.rdp-monthyear-month,
.rdp-monthyear-clear,
.rdp-monthyear-done {
   border: 0;
   background: transparent;
   color: #0d6efd;
   cursor: pointer;
}

.rdp-monthyear-nav {
   color: #fff;
}

.rdp-monthyear-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0.15rem;
}

.rdp-monthyear-month {
   padding: 0.55rem 0.25rem;
   color: #212529;
}

.rdp-monthyear-month:hover:not(:disabled),
.rdp-monthyear-month.selected {
   border-radius: 0.15rem;
   background: #0d6efd;
   color: #fff;
}

.rdp-monthyear-month:disabled {
   color: #adb5bd;
   cursor: default;
}

.rdp-monthyear-picker-footer {
   display: flex;
   justify-content: space-between;
   margin-top: 0.5rem;
   padding-top: 0.5rem;
   border-top: 1px solid #dee2e6;
}

.rdp-monthyear-done {
   padding: 0.25rem 0.75rem;
   border: 1px solid #6c757d;
   border-radius: 0.25rem;
   color: #212529;
}

/* monitoringRules.jsp: keep native time-picker affordances visible (notably Firefox)
   and reserve enough width so the control chrome is not clipped. */
#addEditRuleForm input[type="time"],
#addEditRuleForm input[type="time"].form-control {
   -webkit-appearance: auto !important;
   -moz-appearance: auto !important;
   appearance: auto !important;
   min-width: 8.5rem;
   padding-right: 0.5rem;
}

/* Workflow config: restore pre-BS5 primary card header color (BS5 bg-primary is
   rgb(13,110,253); legacy Bootstrap 3 primary was rgb(51,122,183)).
   Applies only to .card-header.bg-primary which is exclusively used in workflow JSPs. */
.card-header.bg-primary {
   background-color: rgb(51, 122, 183) !important;
}
.card-header.bg-primary .card-title {
   color: rgb(255, 255, 255);
   font-weight: bold;
}
/* Ensure anchors and any other inline elements inside the title inherit white */
.card-header.bg-primary .card-title,
.card-header.bg-primary .card-title a,
.card-header.bg-primary .card-title span {
   color: rgb(255, 255, 255);
}

/* Password field error message display control: show/hide based on error state
   SCOPED TO: passwordReset.jsp password fields (oldPassword, password, confirmPassword)
   STRUCTURE: Error message divs now OUTSIDE input-group containers but INSIDE parent mb-3 row div
   BEHAVIOR: Error message hidden by default; shown only when parent form field has is-invalid class
   EXPANSION: When error message appears, space between input fields expands
   NOTE: Now uses class selectors (.old-password-error-message, etc.) for cleaner CSS without flex conflicts */

/* Hide all error message containers by default */
.old-password-error-message,
.password-error-message,
.confirm-password-error-message {
  display: none !important;
  width: 100%;
  margin-top: 4px;
}

/* Show error message only when parent form field has error (is-invalid class) */
#old_password_div.is-invalid .old-password-error-message,
#password_div.is-invalid .password-error-message,
#confirm_password_div.is-invalid .confirm-password-error-message {
  display: block !important;
  width: 100%;
}

/* Error message text styling */
.old-password-error-message span.form-text,
.password-error-message span.form-text,
.confirm-password-error-message span.form-text {
  width: 343.357px;
  word-wrap: break-word;
  display: block;
  font-size: 13px;
}

.caret {
   display: inline-block;
   margin-left: 2px;
   vertical-align: middle;
   border-top: 4px dashed;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
}