/* Base root font size - everything on the site (Bootstrap typography, the
   sidebar shell, and the public marketing pages) is sized in rem/em off of
   this, so nudging it down here scales the whole app's text uniformly. */
html {
  font-size: 12.5px;
}

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

.btn:focus, .btn:active:focus, .btn-danger.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%;
}

.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;
}

/* =============================================================
   Mobile safety net - Bootstrap's plain `.d-flex` utility has no wrapping
   opinion of its own (flex-wrap defaults to nowrap). It's used all over the
   app (both the authenticated shell and the public/auth pages) for page-head
   button groups, filter-chip rows, badge rows, and form action rows. Left as
   nowrap, three or four buttons/chips/badges squeezed onto one line force
   that row - and sometimes the whole page - to scroll sideways on a narrow
   phone. This makes every plain `.d-flex` row wrap by default so it drops
   extra items onto their own line instead of overflowing; it only ever
   engages once content stops fitting, so nothing changes at desktop widths.
   Any row that genuinely must stay single-line can opt out with Bootstrap's
   own `.flex-nowrap`. */
.d-flex:not(.flex-nowrap) {
    flex-wrap: wrap;
}

/* Every <table> on the site is expected to sit inside a Bootstrap
   .table-responsive wrapper (or the equivalent .pf-owner-table-wrap /
   .ladder-scroll for the custom grid "pseudo-tables" in app-shell.css) so it
   scrolls horizontally instead of overflowing the page on a narrow phone.
   site.js auto-wraps any <table> that's missing one as a runtime safety net -
   see wrapUnresponsiveTables() there. */

/* =============================================================
   Shared #appModal header layout (see _Layout.cshtml + wwwroot/js/modal-forms.js
   and wwwroot/js/onboarding-tour.js). The header's real DOM order is
   [help button, close button] - modal-forms.js's relocateTitle() then inserts the
   loaded form's own title before the close button as a third child. All three are
   flat siblings (never nested in a wrapper - see relocateTitle()'s use of
   modalHeader.insertBefore, which requires modalCloseBtn to stay a direct child of
   .modal-header), so visual placement is controlled purely with CSS `order`:
   title first, then the "?" help button, then the close button - regardless of
   each element's actual DOM position. */
#appModal .modal-header {
    display: flex;
    align-items: center;
}

#appModalHelpBtn {
    order: 2;
    margin-left: auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

#appModal .modal-header .btn-close {
    order: 3;
    margin-left: 0.5rem;
}