html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================================================
   IMS searchable dropdowns (Select2 + Bootstrap 5 theme)
   Make the enhanced dropdowns sit flush with the app's native form controls,
   support the small (form-control-sm) variant, show the red validation border
   that IMS.validate puts on the hidden <select>, and stay above modals.
   ========================================================================== */

/* Match form-control height/border so a Select2 box and a normal input line up */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Fill the grid column width */
.select2-container.ims-select2 {
    width: 100% !important;
    display: block;
}

/* Small variant — matches Bootstrap's .form-control-sm */
.select2-container--bootstrap-5.ims-select2-sm .select2-selection {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding-top: 0.10rem;
    padding-bottom: 0.10rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}
.select2-container--bootstrap-5.ims-select2-sm .select2-selection--single .select2-selection__rendered {
    font-size: 0.875rem;
    line-height: 1.5;
    padding-left: 0.5rem;
}
.select2-dropdown.ims-select2-sm,
.select2-dropdown.ims-select2-sm .select2-results__option {
    font-size: 0.875rem;
}

/* Red border when IMS.validate flags the (now hidden) <select> as invalid */
select.ims-invalid + .select2-container--bootstrap-5 .select2-selection {
    border-color: #dc3545;
}

/* Keep the dropdown panel above Bootstrap modals (modals use z-index ~1055) */
.select2-container--open {
    z-index: 1060;
}
.select2-dropdown {
    z-index: 1060;
}

/* The search box inside the dropdown */
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    border-radius: 0.25rem;
}