/* ============================================================================
   HRMS — button icon alignment contract
   ----------------------------------------------------------------------------
   Problem (measured: analysis/DESIGN_EVALUATION.md):
   `.btn` in this theme has a FIXED height (32px; 28px for .btn-sm, 36px for
   .btn-lg) and `display: inline-block`, and icons inside it are laid out as
   ordinary inline content:
     * a feather `data-feather` <i> is replaced at runtime by an inline <svg> with
       feather.js's default 24x24 box. No author rule sizes it -- the theme's own
       icon rule (`style.css: .btn i { font-size: 1rem }`) only ever matched <i>,
       and the generic `img, svg { vertical-align: middle }` rule gives it a
       baseline-relative alignment, not the button's centring axis -- so the 24px
       box survives and overflows the button's padding box;
     * a Font Awesome <i class="fas ..."> is not an img or an svg, so that rule
       does not apply to it either; it keeps a 13px glyph box and sits on the
       text baseline.
   The two systems therefore disagree with each other and with the button box by
   several pixels, and the icon-to-label spacing depends on whether the view
   author typed a space or a Bootstrap `me-*` utility.

   Contract: any button that directly carries an icon is a centred, single-line
   flex row; every icon gets one size scale, one vertical treatment and one gap,
   whichever icon system it is. Buttons without an icon are untouched.

   Sizes are in `em` on purpose: the label is 10.556px in .btn/.btn-sm and 13px in
   .btn-lg, so only an em-relative token keeps the same icon-to-label ratio in
   every size variant. The two size terms exist because the two systems fill
   their boxes differently -- feather draws 67% of its box, a Font Awesome glyph
   85-108% of its em -- so one shared number would leave feather icons visibly
   smaller than the Font Awesome icon beside them.

   Scope: `.btn` only, only when it directly contains an <svg>/<i>/<img>, and
   never for the three button types that are NOT label+icon rows:
     * `.btn-icon`  -- the pre-existing 38x38 square convention in
       `bootstrap-extensions.css` (0 view files use it today);
     * `.btn-send-message` and `.password-toggle-btn` -- icon-only buttons, already
       centred, which must not have their glyph resized (measured: 12.35x12.35px
       would become 10.02x14.04px without these exclusions).
   Uses :has(); where :has() is unsupported these rules simply do not apply and
   rendering is exactly as before, so there is no new failure mode.
   ========================================================================== */

:root {
  --btn-icon-size: 1.4em;       /* vector icon box, relative to the button's font-size */
  --btn-icon-size-font: 1em;    /* font-icon glyph, same relative scale */
  --btn-icon-gap: .5em;         /* the single icon-to-label spacing token */
}

/* 1 - an icon-bearing button is a centred, single-line flex row */
.btn:not(.btn-icon):not(.btn-send-message):not(.password-toggle-btn):has(> :is(svg, i, img)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  column-gap: var(--btn-icon-gap);
}

/* 2 - both icon systems: one box, one treatment, never on the text baseline */
.btn:not(.btn-icon):not(.btn-send-message):not(.password-toggle-btn):has(> :is(svg, i, img)) > :is(svg, i, img) {
  flex: 0 0 auto;
  align-self: center;
  vertical-align: middle;
  line-height: var(--btn-icon-size);
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

/* 3 - feather's runtime <svg> keeps feather.js's 24px default because the theme's
       `.btn i { font-size: 1rem }` rule only ever matched <i>; pin it. */
.btn:not(.btn-icon):not(.btn-send-message):not(.password-toggle-btn):has(> :is(svg, i, img)) > svg {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}

/* 4 - a font icon is sized by font-size; keep the glyph at the same relative scale
       and let its own advance width set the box, so narrow and wide glyphs keep
       the same visible gap. */
.btn:not(.btn-icon):not(.btn-send-message):not(.password-toggle-btn):has(> :is(svg, i, img)) > :is(i, img) {
  font-size: var(--btn-icon-size-font);
  height: var(--btn-icon-size);
  width: auto;
}