/* ---------------------------------------------------------------------------------------
   FontAwesome 6 size parity with FontAwesome 4.

   FA4 drew its glyphs on a 14px baseline grid; FA5/FA6 use 16px. At the same font-size an
   FA6 icon therefore renders about 16/14 = 1.143x larger, which is why every icon in the ERP
   looked slightly bigger after the upgrade. Scaling the base classes by 14/16 = 0.875em
   restores the old visual size.

   Why :where() - it contributes ZERO specificity, so this rule applies only to icons that
   have no size of their own. Anything already sized explicitly keeps winning:
     * FA6's own helpers - fa-lg, fa-2x ... fa-10x
     * this app's own sizing classes, e.g. class="fa fa-print Font1024_14"
   A plain `.fa { font-size: .875em }` would have loaded after those and overridden them,
   shrinking icons that were already deliberately sized. Do not "simplify" it to that.

   Old browsers that do not understand :where() drop the rule and simply keep FA6's larger
   icons - a safe degradation.

   TO TUNE: change 0.875em below. Larger value = larger icons. 1em = full FA6 size.

   NOTE ON DEPLOYMENT: css/ is listed in .dockerignore, so this file does NOT ship in the
   container image - it is served from the SMB content mount that container-start.ps1
   junctions in. After editing it, copy it to the file server
   (\\10.20.2.63\webdata -> content_static\css\) or production will keep serving the old
   copy. Bump the ?v= on the 27 <link> tags whenever its contents change.

   DO NOT PIN FONTAWESOME BACK TO 6.5.0. In 6.5.0 the file-pdf glyph (U+F1C1, which every
   legacy fa-file-pdf-o resolves to via v4-shims) is drawn with the letters "PNG" instead of
   "PDF" - an upstream drawing bug. Verified from the shipped SVGs: 6.5.0's three letterform
   subpaths are P, N (two stems + a diagonal) and G (rounded C with an inner bar), while
   6.6.0 and 6.7.2 correctly draw P, D (stem + right bowl) and F (stem + two bars). The app
   is on 6.7.2 for this reason.
   --------------------------------------------------------------------------------------- */

:where(.fa, .fas, .far, .fab, .fal, .fat, .fad,
       .fa-solid, .fa-regular, .fa-brands, .fa-light, .fa-thin, .fa-duotone) {
    font-size: 0.875em;
}

/* ---------------------------------------------------------------------------------------
   Bootstrap 3 input-group compatibility.

   Bootstrap builds input-groups as display:table and requires its children to stay
   display:table-cell (bootstrap.min.css: ".input-group-addon,.input-group-btn,
   .input-group .form-control{display:table-cell}"). Pages put the icon straight on the
   addon - <span class="input-group-addon fa fa-phone"> - so the two stylesheets fight over
   the same element twice:

     font-weight  bootstrap .input-group-addon{font-weight:normal} vs FA6 .fa{font-weight:900}
     display      bootstrap .input-group-addon{display:table-cell} vs FA6 .fa{display:...}

   Both pairs are single-class selectors, so load order alone decides and there is no order
   that satisfies both: with FA6 first, addon icons drop to the regular face and every
   solid-only icon (graduation-cap, phone, lock, group) renders as tofu; with FA6 last, the
   weight is right but the addon leaves the table row and stacks above its input.

   So FA6 loads last (fixing the weight) and the display is handed back through FA6's own
   custom property - its base rule is display:var(--fa-display,inline-block), so setting
   --fa-display here wins without any specificity battle.
   --------------------------------------------------------------------------------------- */
.input-group-addon,
.input-group-btn {
    --fa-display: table-cell;
}