/* =====================================================================
   TLC SST — System Pages  ·  MASTER on TurnerLee.com
   Spartan_www/TurnerLee/shared/system-pages/v1/system-pages.css
   ---------------------------------------------------------------------
   Loaded site-wide via sst-css-styles.html (placed LAST so it wins the
   cascade over per-site brand CSS), but every rule is scoped to the
   .sys-page wrapper so ONLY Treepl System Pages are affected — regular
   site pages never carry .sys-page and are untouched.

   Purpose: every system page (403 / 404 / sign-in / cart / checkout /
   form & reset results / etc.) reads as CENTERED, consistently, on every
   TLC site. Edit this one file on TurnerLee and the change applies to
   ElevatedMP, CraigWhitlock, and any other consuming site on next load.

   Per the sst-cache-bust rule, bump ?v=N in every sst-css-styles.html
   reference after editing this file.

   v1.001 · 2026-06-17 · created
   ===================================================================== */

/* ---------------------------------------------------------------------
   Shell — center the whole content block on the page
   --------------------------------------------------------------------- */
html body .sys-page {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
html body .sys-page > section,
html body .sys-page .container {
  margin-left: auto;
  margin-right: auto;
  float: none;
}
html body .sys-page .row {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* ---------------------------------------------------------------------
   Headings + descriptive copy — force centered, beating brand text-align
   (brand stylesheets often set h2/h3 text-align:left, which is what makes
   the default 403/404 headings render left-aligned)
   --------------------------------------------------------------------- */
html body .sys-page h1,
html body .sys-page h2,
html body .sys-page h3,
html body .sys-page h4,
html body .sys-page h5,
html body .sys-page h6,
html body .sys-page p,
html body .sys-page .system_title,
html body .sys-page .system_subtitle,
html body .sys-page .system_text {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Legacy align_left on system headings (cart / checkout titles) -> center */
html body .sys-page h1.align_left,
html body .sys-page h2.align_left,
html body .sys-page h3.align_left,
html body .sys-page h4.align_left,
html body .sys-page h5.align_left,
html body .sys-page .system_title.align_left {
  text-align: center !important;
}

/* Result / status SVG icons (quote-receipt, reset-password-result) centered */
html body .sys-page .system_svg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------
   Button rows / go-back links — centered
   --------------------------------------------------------------------- */
/* NOTE: do NOT add justify-content:center to .d-grid — Bootstrap's .d-grid
   makes the submit button a full-width grid item; justify-content:center
   collapses the track to the button's content width (squishes Sign In etc.).
   The button rows are already centered via mx-auto / justify-content-md-center. */
html body .sys-page .d-grid {
  margin-left: auto;
  margin-right: auto;
}
html body .sys-page .goBack {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
   FUNCTIONAL EXCEPTIONS — keep forms + data tables usable
   (centered text on inputs / tabular data reads as broken; reset those)
   ===================================================================== */

/* Form fields: column stays centered on the page, field text reads left */
html body .sys-page form .form-control,
html body .sys-page form input,
html body .sys-page form select,
html body .sys-page form textarea,
html body .sys-page form label,
html body .sys-page .form-floating > label {
  text-align: left !important;
}

/* E-commerce / summary tables keep authored cell alignment */
html body .sys-page table td,
html body .sys-page table th {
  text-align: left !important;
}
html body .sys-page table td.align_right,
html body .sys-page .align_right {
  text-align: right !important;
}