/* Bootstrap 5 overrides for Indigo — loaded on migrated views, AFTER the BS5 CSS so it wins. Pins BS5 defaults back to the app's look during the BS3->5 transition and bridges the still-shared validator.js (BS3 output classes) to a BS5-correct appearance. See docs/bootstrap5-migration-spec-and-discoveries.md (D7, D11, D12). Each newly-migrated view must link this file after /bs5 bootstrap.min.css. */ /* D7 — BS5 defaults font-family to the native system stack; pin it back to the app's stack so migrated and un-migrated pages match during the transition. */ :root { --bs-body-font-family: Arial, Helvetica, sans-serif; } body { font-family: Arial, Helvetica, sans-serif; } /* D12 — BS5 also changes the type SCALE, not just the family. Verified against the actual packages: bootstrap@3.4.1 shipped `body { font-size: 14px }` and `.form-control { font-size: 14px; padding: 6px 12px }`; BS5 sizes everything in `rem` against an untouched 16px root (`.form-control { font-size: 1rem; padding: 0.375rem 0.75rem }`), so all type and control padding came out ~14% larger. Rescale the ROOT, not body: `rem` resolves against , so a `body { font-size: 14px }` pin fixes body text but never reaches BS5's rem-sized component internals. 14/16 = 0.875. This also proportionally restores BS3's tighter control padding. Indigo's own stylesheets size much of their text in percentages (80%/90%/100%/150%...), authored against the 14px baseline, so they compound correctly off this too. Absolute-px rules elsewhere (e.g. style-login's #login-panel 450x400, input height 25px) are unaffected by a root rescale — only the text/padding inside those fixed boxes rescales, which is the intent. */ html { font-size: 87.5%; } /* D16 — bootstrap-tagsinput hardcodes BS3 chip classes: its default is `tagClass: function(){ return "label label-info" }`. BS3's `.label` supplied `color:#fff; padding:.2em .6em .3em; font-size:75%; font-weight:700; border-radius:.25em`, and BS5 has no `.label` at all (it became `.badge`). The app's own style-forms.css sets the chip background to black, so with `.label` gone the text fell back to the inherited near-black body colour: chips rendered BLACK ON BLACK — the tag was correctly added and selected, it was simply invisible, which read as "selecting a tag blanks it out". Restore only what BS3's `.label` provided, scoped to the tagsinput container so no global `.label` rule is introduced (nothing else in the app uses these classes — the sole source is tagsinput's own default). display/vertical-align/background stay with the app's own rules. */ .bootstrap-tagsinput .tag { color: #fff; padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; border-radius: .25em; } /* D17 — BS3's form-check and button/well classes, which BS5 dropped entirely. Reported from a prod-vs-BS5 comparison: the "Override Auto Visibility by Role" radios (None/All/Selected) render INLINE on prod and STACKED on BS5. Cause: the markup uses BS3's `.radio-inline`, which BS5 replaced with `.form-check-inline` — so the wrappers became plain block divs. Verified neither Bootstrap 5 nor any Indigo stylesheet defines these, i.e. they currently have no styling at all from either source: .radio-inline 18 uses across 8 views .checkbox-inline 12 uses across 12 views .btn-default 6 uses across 3 views .well 2 uses plus bare `.radio` / `.checkbox` block wrappers (operation-console, admin). Bridged rather than migrated to `.form-check*`, matching D11/D16: 30+ occurrences across a dozen views, several of them customer report forms, so rewriting the markup is far more churn and risk than restoring the four rules. A real `.form-check` migration belongs with the Phase 3 owned- replacement work. Values taken from bootstrap@3.4.1's compiled CSS, not guessed (D13). Deliberately NOT copying BS3's `padding-left:20px` + absolutely-positioned input scheme: Indigo's markup has the input as a SIBLING of the label rather than inside it, and BS5 gives inputs their own margins, so replicating that would risk overlapping text. Only layout and spacing are restored, which is what the reported difference actually is. Indigo's own narrower rules (e.g. `.form-group .checkbox {margin:0}`, `.panellogsearch .radio label`) keep winning on specificity. */ .radio-inline, .checkbox-inline { display: inline-block; margin-bottom: 0; margin-right: 10px; font-weight: 400; vertical-align: middle; cursor: pointer; } .radio, .checkbox { display: block; margin-top: 10px; margin-bottom: 10px; } /* D18b — the "+" add button sits low against its field. `.btn-add` has NO styling anywhere in the app: it is a bare