/*
 * Form.io 5 on a Bootstrap 4 page - the four utility classes that got renamed.
 *
 * WHY THIS FILE EXISTS. Form.io 5 does not bundle Bootstrap; it writes Bootstrap class names and
 * expects the surrounding page to supply the stylesheet. It writes BOOTSTRAP 5 names, and the web
 * form pages load Bootstrap 4.4.1, which renamed several utilities between the two versions. Any
 * name Bootstrap 4 does not know simply does nothing.
 *
 * Mostly that would be invisible, but one of them is not. Form.io 5 added screen-reader hints such
 * as <span class="visually-hidden">, numeric only,</span> next to a number field's label - text
 * meant for a blind visitor's screen reader and for nobody else. Bootstrap 4 calls that class
 * "sr-only" and has no rule for "visually-hidden", so nothing hides the span and the hint prints on
 * screen: a field labelled "Amount Requested" renders as "Amount Requested , numeric only,". That is
 * on the public form every visitor sees, on every tenant's site.
 *
 * The alternative was moving these pages to Bootstrap 5, which restyles every control on them. That
 * is a deliberate visual change and belongs with the planned restyle, not with a library upgrade
 * whose whole purpose is that nothing looks different. So: translate the four names and leave the
 * rest alone.
 *
 * This is the COMPLETE set - the Form.io 5.5.0 bundle was searched for every Bootstrap 4-to-5
 * utility rename, and these four are the only ones it emits (visually-hidden 24 times, float-end 6,
 * me-2 twice, text-end once). form-check, form-check-label and d-flex are also emitted but exist in
 * both versions, so they need nothing. Re-run that search when the library is next upgraded.
 *
 * DELETE THIS FILE if these pages ever move to Bootstrap 5 - it would then be defining classes
 * Bootstrap already defines, and the duplicate is a trap for whoever debugs the next spacing bug.
 */

/* Bootstrap 4 calls this .sr-only. Same declarations, plus the negative margin Bootstrap 5 adds. */
.visually-hidden {
    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;
}

/* Renamed for right-to-left languages: "end" means the side the text finishes on. */
.float-end { float: right !important; }
.text-end  { text-align: right !important; }

/* Margin-end, i.e. Bootstrap 4's mr-2. The 0.5rem is Bootstrap's own spacer step 2. */
.me-2 { margin-right: 0.5rem !important; }


/* ---------------------------------------------------------------------------------------------
   The step tabs on a multi-step form.

   A DIFFERENT SHAPE OF THE SAME BOOTSTRAP PROBLEM, and one a search for renamed classes cannot
   find. Form.io 5 marks each step tab as `badge bg-primary` (or bg-info / bg-success), and leaves
   the TEXT colour to Bootstrap 5, whose `.badge` sets `color:#fff`. Bootstrap 4's `.badge` sets no
   colour at all - it expects `.badge-primary`, which sets background and text together. So on these
   pages the tab kept its strong blue background while the text fell back to the near-black it
   inherited from the page: measured at 4.12:1 on the current step, which fails the accessibility
   minimum for normal text, and reads as muddy dark-on-blue. `bg-primary` exists in BOTH Bootstrap
   versions, so nothing looked renamed - only the default that used to accompany it went missing.

   Simply restoring Bootstrap 5's white text would still leave white on #007bff at 3.98:1, and white
   on the teal of the non-current tabs at about 2.7:1 - worse. So these are styled properly instead:
   a pale background with dark text, which is how the rest of the product reads, with the step you
   are on picked out by colour and weight rather than by being the loudest block on the row.

   Backgrounds need !important because Bootstrap 4's `.bg-*` utilities are themselves !important.
   Scoped to .wizard-pages so no other badge anywhere in the product is touched.
   --------------------------------------------------------------------------------------------- */

/* Sized up from Bootstrap's badge default, which rendered these at 24px tall in 12px text. These are
   the main way around a multi-page form - the thing a tenant clicks most while building one - and at
   badge size they read as decoration rather than navigation, and are fiddly to hit. */
.wizard-pages .wizard-page-label {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    background-color: #eef2f5 !important;
    color: #33424e !important;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .1px;
    padding: .45rem .9rem;
    cursor: pointer;
}

/* The page tabs and their controls sit on one line and should share a baseline. */
.wizard-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
}

.wizard-pages > li {
    display: inline-flex;
    align-items: center;
}

.wizard-pages .wizard-page-label:hover {
    background-color: #e2e8ee !important;
    border-color: #8a97a3;
}

/* The step currently being edited. Form.io marks it bg-primary. */
.wizard-pages .wizard-page-label.bg-primary {
    background-color: #e2f0ec !important;
    color: #0b5446 !important;
    border-color: #0e6b59;
}

/* "+ Page" - an action rather than a step, so it keeps a colour of its own. */
.wizard-pages .wizard-page-label.bg-success {
    background-color: #e8f3ea !important;
    color: #2b6b39 !important;
    border-color: #5cb85c;
}

/* ---------------------------------------------------------------------------------------------
   The blank white button in each component's toolbar.

   Reported as "a move button with white background which does nothing". Two separate things made it
   look broken. It is a DRAG HANDLE - you drag it to reorder a field - so clicking it correctly does
   nothing; and its icon never drew, leaving an empty white box that looks like a button that has
   failed. The icon is missing because Form.io asks for `fa-move`, which is not a FontAwesome 4 class
   at all: the four-way arrows icon is `fa-arrows` (\f047). Form.io's own icon translation covers most
   names but not this one, so the character it asked for does not exist and nothing is painted.

   Mapping the name onto the real glyph fixes it for every component at once. A cursor and a tooltip
   are added in the builder itself so the handle also says what it is for.
   --------------------------------------------------------------------------------------------- */

.fa-move:before {
    content: "\f047";   /* fa-arrows */
}

.component-settings-button-move {
    cursor: move;
}

/* The step navigation on the PUBLIC form. Form.io renders these as buttons rather than badges, and
   Bootstrap 4 has no .btn-link styling for them either, so they are given the same treatment for
   consistency - the visitor sees the same "where am I" cue the builder shows. */
.formio-wizard-nav-container .btn,
.pagination .page-link.wizard-page-label {
    border-radius: 3px;
}