/* Global screen contract, injected for all full pages (not fragments or exports).
 * Layered important rules beat legacy unlayered page/Bootstrap overrides.
 * Keep component widths, table scrollers and vertical scrolling page-owned. */
@layer site-desktop-layout {
  @media screen {
    :root,
    body {
      --site-page-min-width: 1000px !important;
      min-width: 1000px !important;
    }

    :root {
      overflow-x: auto !important;
    }

    body {
      box-sizing: border-box !important;
    }

    /* A 1000px banner plus the existing page gutters; neither variant shrinks. */
    body:has(> .header.site-banner) {
      min-width: calc(1000px + 2 * var(--site-page-padding, 24px)) !important;
    }

    .header.site-banner[data-account-tools] {
      min-width: 1000px !important;
    }

    /* Fixed dashboard navigation shares the document's horizontal scroll,
     * while keeping its original vertical pinning and panel scrolling. */
    body:has(> .site-banner--fixed) .sidebar-nav {
      left: calc(0px - var(--site-scroll-x, 0px)) !important;
    }

    body:has(> .site-banner--fixed) .fof-toolbar {
      left: calc(0px - var(--site-scroll-x, 0px)) !important;
      right: auto !important;
      width: max(100%, calc(1000px + 2 * var(--site-page-padding, 24px))) !important;
    }
  }

  /* Bootstrap's desktop columns/utilities used by business pages must also
   * remain active when the physical window is narrower than the canvas. */
  @media screen and (max-width: 991.98px) {
    .row > :is(.col-md-6, .col-lg-6) {
      flex: 0 0 50% !important;
      width: 50% !important;
      max-width: 50% !important;
    }

    .d-lg-flex {
      display: flex !important;
    }
  }
}